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Wynn Netherland 


有 近 20 年 的 Web 从 业经 历 。 他 主笔 和 参与 
撰写 过 许多 Web 开 发 方面 的 图 书 。 他 喜欢 
在 GitHub 上 工作 ， 经 常 在 行业 会 议 上 演 
讲 ， 并 “出 没 ” 于 开发 者 聚会 ， 有 了 时候 还 
会 在 屋 后 的 门廊 里 弹 吉 他 。 


Nathan Welzenbaum 


毕业 于 华盛顿 大 学 ， 专 业 是 计算 机 科学 和 
哲学 ， 他 从 Sass 诞 生 之 初 就 是 首席 开发 
者 。 目 前 ， 他 是 谷歌 的 软件 工程 师 ， 负 责 
Gmail 开 发 。 


Chris Eppstein 


Compass 框 架 的 创建 者 ，Sass 核 心 团队 成 
员 。 上 毕业 于 加 州 理工 学 院 ， 软 件 工 程 师 ， 
有 10 年 以 上 为 硅谷 创业 公司 创建 网 站 和 应 
用 程序 的 经 验 。 阁 迷 于 前 端 开发 ， 目 前 在 
Linkedln 从 事前 端 架 构 和 开发 者 关系 相关 的 
LES 


Brandon Mathis 


Compass 核 心 团队 成 员 ， 基 于 Jekyll 的 可 扩 
展 博客 框架 Octopress 的 作者 。 他 目前 是 
MongoHQ 的 一 名 设计 师 。 


HTTgsemsiresm 


Sass and Compass in Action 


SASS 5 Compass Ktk 


[Æ] Wynn Netherland Nathan Weizenbaum 
Chris Eppstein Brandon Mathis x 


XKE ”起 锦江 张 洛 然 ” 译 


人 人民 邮电 出 版 社 
Jb X 


图 书 在 版 编目 CC I PO 数据 


Sass 与 Compass 实 战 / (98) 尼 德 兰 
(Netherland, W.) $% ; 刘 炬 光 ， 赵 钊 江 ， 张 浩然 译 . 
一 北京 : 人 民 邮 电 出 版 社 ，2014.6 

(图 灵 程 序 设 计 从 书 )》 

ISBN 978-7-115-35301-6 


I. Ose II. OE Qxj-- ORe Owe MI Q 
网 页 制作 工具 一 程序 设计 IV. (WTP393. 092 


中 国 版 本 图 书馆 CIP 数 据 核 字 (2014) 25068206 57 


内 容 提 要 
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献 给 那些 精心 打造 网 页 并 因 他 们 手中 的 作品 而 欣喜 不 已 
的 Web 开 发 与 设计 人 员 。 


推荐 序 一 


回顾 一 下 做 过 的 项 目 , 会 发 现 我 们 曾经 多 么 忽视 CSS1 JavaScript 有 着 高 大 上 的 设计 模式 和 模 
块 规范 ， 分 布 在 精心 设计 过 的 目录 里 ， 而 CSS 仅 仅 被 简单 地 蕉 积 在 一 个 文件 里 。 它 不 重要 吗 ” 前 
端 开 发 最 基本 的 任务 就 是 还 原 设计 ， 离 不 开 用 CSS 实 现 那 些 复杂 的 布局 和 绚丽 的 效果 ( 后 面 还 会 
提 到 它 在 移动 Web 开 发 中 的 重要 性 )。 它 简单 吗 ? HttpArchive 统 计 全 球 Top100 网 站 平均 单个 页 面 
CSS 达 到 31 KB， 在 频繁 的 迭代 中 维护 它们 并 不 轻松 。 更 不 要 说 众所周知 的 痛 点 一 一 浏览 可 莱 容 
性 。CSS 有 既然 如 此 重要 ， 叉 不 简单， 为 什么 没有 像 它 的 小 伙伴 JavaScript 那 样 得 到 重视 和 发 展 呢 ? 

种 种 原因 中 有 一 个 很 明显 一 一 它 不 是 语言 。CSS 开 发 是 基于 泻 染 原理 和 W3C 标 准 ( 及 事实 标 
准 ) 来 设计 规则 的 ， 这 里 边 没 有 算法 ， 没 有 数据 结构 ,没有 逻辑 控制 。 这 让 习惯 语言 开发 的 程序 
员 无 从 生成 思路 。 一 个 好 的 后 端 程序 员 可 以 很 快 掌 握 JavaScript， 但 面 对 CSS 就 会 变 得 茫然 无 助 。 
于 是 便 会 催 单 粗 骏 地 把 所 有 代码 随意 写 在 一 起 , 所 有 布局 都 用 float 实 现 。 表面 上 看 把 问题 解决 了 ， 
实际 上 是 在 到 处 “ 埋 雷 ”, 到 处 补 “ 破 窗 ”。 这 种 慢性 后 末 并 没有 激发 CSS 在 语言 方面 更 快 的 发 展 。 
保持 简单 ， 复 杂 的 效果 让 JavascripVFlash 去 干 吧 ， 似 乎 问题 就 能 回避 。 但 很 快 移动 端的 崛起 打破 
了 秩序 ， 先 是 把 Flash 宣 判 了 ，JavaScript 在 手机 上 的 性 能 和 能 耗 成 为 翘 爸 ，CSS3 则 在 GPU 的 作用 
下 看 起 来 异 稼 完美 ,于 是 一 下 子 被 推 上 风口 浪 尖 。 曾 经 那些 尘封 的 草案 又 被 唤醒 。 各 大 浏览 顶 厂 
商 范 相 实 现 最 新 特征 。 炫 酶 的 2D/3D 动 画 效 果 、 高 端的 FlexBox 布 局 ……CSS3 一 夜 之 间 上 了 头条 。 
随 着 应 用 的 深入 ， 最 初 的 快感 很 快 退去 ,新 的 兼容 性 问题 又 来 了 ， 浏 览 右 的 种 种 bug， 闭 心 的 厂 
商 前 级 ， 刚 学 到 就 被 废弃 的 标准 …… 在 这 种 形势 下 CSS 的 开发 想 保 持 们 单 也 难 。 

浮华 过 后 ,人 们 开始 认真 思考 如 何 提 高 CSS 的 开发 效率 和 可 维护 性 等 工程 问题 .Sass 早 在 2007 
年 诞生 于 “工具 控 ” 的 Ruby 社 区 , 开始 服务 的 对 象 目 然 是 Ruby 工 程 师 , 是 为 了 让 他 们 能 像 写 Ruby 
那样 写 CSS。 直 到 推出 SCSS 这 种 语法 风格 ，Sass 变 得 更 像 是 CSS 的 扩展 和 增强 ， 可 以 跟 原生 CSS 
混 写 ， 很 快 被 前 端 工 程 师 接纳 了 。 现 在 在 我 的 项 目 里 ， 一 眼 望 去 都 是 .scss 文 件 。 据 我 所 各， 国内 
各 大 互联 网 公司 前 端 团 队 的 CSS 开 发 也 都 转向 Sass 或 LESS。 如 果 你 是 前 端 工程 师 或 有 志 成 为 前 端 
工程 师 ， 非 常 有 必要 把 这 块 纳入 到 上 自己 的 技能 体系 中 。 

Sass 让 CSS 变 成 语言 ， 可 以 像 其 他 语言 那样 去 组 织 模块 、 封 装 、 复 用 代码 ， 让 CSS 开 发 看 上 
去 非常 有 “设计 感 ”。 在 大 规模 的 网 站 开发 中 ，Sass 的 用 法 变 得 至 关 重 要 。 其 实 任何 工具 都 是 双 
刃 剑 ， 用 好 事半功倍 ， 反 之 则 有 破坏 性 。 比 如 ， 写 Sass 很 容易 就 写 出 多 层 通 套 ， 生 成 的 CSS 选 择 表 
就 会 有 很 多 级 ， 不 仅 低 效 ， 维 护 上 也 很 头疼 ， 以 至 于 出 现 BEM 这 种 用 法 。 在 代码 设计 上 ， 继 承 和 
混合 硕 有 什么 区 别 ， 怎 么 抽象 和 封 痛 更 好 ， 等 等 这 些 由 用 法 引申 出 来 问题 信 得 在 实践 中 洲 心 思考 。 































































































2 ”推荐 序 一 


在 技术 社区 里 经 常 能 看 到 各 种 文章 介绍 Sass 的 用 法 或 观念 或 技巧 ， 辨 清 优 劣 ， 吸收 精华 ， 前 
提 是 要 先 对 它 有 系统 的 了 解 。 虽然 也 能 搜 到 不 少 中 文 资料 ,但 很 雄 片 且 质 量 参差 不 齐 。 像 我 这 种 
东 看 点 西 看 点 的 人 ， 之 前 春 实 走 过 不 少 弯路 。 在 一 次 前 端 标准 化 交流 会 (w3ctech ) E, IE 
到 李 松 峰 老 师 ， 吐 槽 如 今 光 是 引进 一 些 介绍 眼下 流行 的 JS 库 的 书 ,， 实 际 上 某 些 JS 库 虽 然 流 行 但 在 
项 目 中 未 必 适 用 。 反 倒 像 Sass 如 此 普及 而 且 适 用 面 又 广 的 技术 ， 没 有 一 本 中 文书 。 没 想到 松 峰 老 
师 很 快 就 促成 本 书 的 引进 ， 并 找到 锦江 ( 义 三 股 四 ) 等 有 丰富 开发 经 验 的 人 翻 谋 。 我 对 本 书 的 出 
版 充满 期 待 ， 并 相信 它 一 定 会 把 更 多 人 带 入 CSS 的 世界 。 


























克 军 
2014 年 3 月 4 日 
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CSS1 在 1996 年 提出 时 , 目的 是 作为 一 个 简单 的 样式 机 制 , 让 作者 与 读者 都 能 为 HTML 文件 添 
加 或 改写 样式 ,但 是 仅 限 于 字体 、 颜 色 、 框 线 、 间 距 等 。 在 当初 的 建议 书 * 的 附录 有 这 人 句 话 : 


我 们 不 指望 CSS 会 进化 成 一 门 程序 语言 。 


这 人 句 话 在 2014 年 读 来 ， 是 多 么 地 讽刺 。 今天 如 果 你 不 掌握 任何 一 种 CSS 预 处 理 絮 ， 大 概 都 不 
好 意思 说 目 己 是 个 合格 的 前 端 工 程 师 。 

当时 规划 CSS 霹 言 的 人 们 认为 ， 每 个 人 都 应 该 可 以 轻松 擎 握 CSS， 所 以 它 不 能 太 复 杂 ， 更 不 
应 该 有 一 般 程 序 二 言 具 备 的 变量 、 逻 辑 、 闵 数 ， 等 等 。 但 是 随 看 现实 需求 越 来 越 多 ，CSS 陆 乡 增 
添 了 排版 布局 、 阴 影 圆 角 、 动 画 分 镜 , 甚至 3D 特 性 , 使 得 CSS 网 页 设计 早已 不 是 一 件 简单 的 事情 。 
更 何况 我 们 还 得 面 对 “ 一 千 零 一 个 ”浏览 如 吴 虫 与 羔 容 问题 ,以 及 像 是 罚 写 小 学 生 的 众多 厂商 前 
缀 。 撰 写 CSS 成 了 一 种 黑 魔 术 ， 更 别提 要 维护 它 了 。 

幸好 我 们 不 需要 绝望 ， 随 着 LESS 、Sass 、Stylus 等 CSS 预 处 理 器 的 兴起 ， 我 们 有 了 另 一 种 选 
择 。 网 页 设计 师 与 开发 者 可 以 “ 别 做 重复 劳动 ”( DRY，Don’t Repeat Yourself )， 撰 写 CSS 也 仍然 
可 以 充满 乐趣 。 

Sass 3.0 版 在 2010 年 5 月 释 出 ， 增 添 了 与 CSS 兼 容 的 SCSS 语 法 ， 并 且 挫 配 Compass 的 强大 社 群 
支持 , MKE m T EME. 笔者 在 2013 年 底 参 加 了 CSSDevConf, 开场 Keynote 的 知名 设计 师 Zoe 
Gillenwater 更 建议 所 有 网 页 设计 师 都 应 该 开始 学 习 Sass。 会 场 上 几乎 没有 人 讲 “CSS 预 处 理 需 ”， 
只 问 :… 你 的 项 目 用 了 Sass 吗 ? “时 至 今日 , Chrome 与 Firefox 的 开发 者 工具 都 已 经 内 建 SCSS 与 LESS 
语法 的 文 持 。 

同样 是 在 2010 年 ， 当 时 我 仍然 在 自己 创办 的 设计 公司 Handlino 服 务 。 每 次 我 遇 到 设计 师 朋 友 
们 ， 都 会 兴奋 地 回 他 们 介绍 SaswCompass。 只 要 我 稍稍 展示 变量 与 图 片 精灵 (第 6 章 ) 功能 ， 所 
有 人 都 立刻 想 要 改 用 Sass 人 Compass。 但 是 当 他 们 发 现 “天 啊 ， 这 玩意 得 要 会 使 用 命令 行 ”， 热 情 
立刻 就 被 深 烛 了 :“ 你 别 闸 了 ， 我 不 可 能 学 会 的 !” 

那 年 年 底 的 一 个 周末 , 我 的 同事 tka 心 血 来 滴 ， 撰写 出 了 一 个 跨 平 台 的 Sass/Compass 图 形 界面 
工具 ， 立 刻 受 到 大 家 的 欢迎 。 我 们 决定 将 它 命名 为 Compass.app”， 将 程序 开源 释 出 ， 并 且 在 网 络 















































(D http://www.w3.0org/TR/REC-CSS1-961217#appendix-e。 
(2) http://compass.kkbox.com/。 
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上 贩卖 预 先 编译 好 的 软件 。 我 们 承诺 捐 出 30% 获 利 到 Compass 指 定 的 慈善 机 构 ( Compassz&— 1 2 
善 软件 )， 因 而 获得 了 Compass 作 者 Chris Eppstein ( 也 是 本 书 作者 ) 的 文 持 。 截 至 去 年 , 我 们 已 经 
累积 捐 出 超过 15000 美 元 。 以 一 个 开源 软件 来 说 ， 这 实在 是 个 不 可 思议 的 成 绩 。 

Sass 已 经 释 出 了 最 新 的 3.3 版 ，Compass 也 即将 迈 癌 1.0 版 这 个 重大 的 里 程 碑 。 很 高 兴 听 到 
《Sass 与 Compass 实 战 》 即 将 出 版 的 消 恩 ， 更 感谢 李 松 峰 老 师 与 译 者 群 投 注 的 储 闸 。 相 信 你 也 能 重 
拾 撰 写 CSS 的 乐趣 。 
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刚刚 过 去 的 2013 年 ， 被 称 为 中 国 互联 网 金融 发 展 的 元 年 ，020 概 念 火 遇 大 江南 北 。QQ 日 然 
不 甘 落 后 ， 整 个 2013 年 我 都 在 负责 QQ 查找 的 商业 化 推进 。 来 自 上 层 的 压力 以 及 各 方 的 重视 ， 使 
QQ 查找 始终 以 每 周 最 少 一 个 版 本 的 速度 快速 迭代 。 一 段 时 间 下 来 ， 我 们 发 现 CSS 变 得 越 来 越 腕 
肿 ， 不 可 维护 和 宛 余 代码 越 来 越 多 。 
之 前 很 早 就 在 社区 了 解 到 了 Sass 和 Compass 的 存在 ， 但 没有 形成 意识 上 的 重视 。 一 直 以 来 手 
写 静态 CSS 的 思维 习惯 ,使 得 自己 并 没有 看 到 通过 框架 来 动态 创建 样式 的 巨大 优势 ,甚至 认为 Sass 
和 Compass 是 非常 采 笨 的 ， 是 给 不 会 CSS 的 人 使 用 的 。 但 面 对 日 益 庞 大 的 CSS 人 代码， 寻找 一 个 有 
效 的 技术 解决 方 采 就 变 得 非常 必要 了 了 。 
深入 之 后 ， 才 发 现 上 自己 之 前 的 想法 完全 错 了 。Sass 并 不 能 让 你 写 出 更 好 的 CSS， 但 是 却 可 以 
让 你 更 高 效 地 写 出 高 可 维护 性 的 CSS。, 这 人 句 话 怎么 理解 呢 ? 如 果 你 本 身 对 CSS 一 无 所 知 , 那 么 Sass 
并 不 能 帮助 你 实现 从 菜鸟 到 CSS 大 师 的 转变 ，Sass 的 使 用 建立 在 你 对 CSS 有 一 定 了 解 的 基础 上 ， 
它 有 痢 一 系列 令 人 激动 的 特性 。 全 面 而 详细 的 特性 介绍 目 然 害 要 读者 去 详 读 此 书 ， 这 里 我 只 挑 
QQ 查找 受益 颇 深 的 几 点 分 享 给 大 家 。 
O Sass 对 原生 CSS eimport 指 令 的 扩展 , 让 我 们 可 以 将 分 布 在 不 同文 件 中 的 样式 最 后 合并 到 
一 起 ， 这 样 通过 把 样式 分 散 到 多 个 更 小 的 文件 中 ， 整 个 CSS 的 结构 立马 变 得 更 加 清晰 了 。 
口 变量 机 制 ， 使 得 标准 的 颜色 值 、 行 高 、 列 宽 青 也 不 用 “ 东 一 椰 头 西 一 棱 杷 ”地 分 散 各 处 ， 
有 了 一 个 统一 的 地 方 归纳 整理 。 设 计 师 哪 天 想 变 ， 只 需要 修改 一 处 即 可 ， 省 力 又 省 心 。 
O 标准 样式 的 抽 离 ， 像 调用 函数 一 样 ， 轻 松 将 统一 的 样式 抽 离 出 来 ， 避 免 了 复制 来 、 复 制 
去 ， 一 旦 交互 变动 ， 只 需要 修改 抽 离 出 来 的 混合 需 一 处 。 
O 样式 继承 的 概念 ， 使 得 我 们 对 于 查找 中 各 种 btn 的 修饰 变 得 清晰 ， 无 论 何 种 btn， 统 一 从 父 
























































级 btn 继 承 基 础 样式 。 
口 目 动 合 图 实在 是 太 方 便 了 ， 生 接 把 切 图 扔 到 图 片上 日 录 ， 对 应 的 合 图 和 CSS 就 全 部 目 动 生 
成 了 。 


诸如 此 类 的 好 处 实在 太 多 ， 留待 各 位 读者 通过 阅读 本 书 学 习 和 应 用 吧 。 

好 风 途 借 力 ， 送 我 上 青云 。 自 从 引入 了 Sass 和 Compass，QQ 查 找 的 样式 维护 成 本 大 幅 下 降 ， 
给 我 们 市 来 了 喘 大 的 好 处。 

抱 着 对 Sass 和 Compass 深 深 的 爱 与 感激 ， 在 2013 年 上 海 W3CTech 的 分 享 大 会 上 ， 我 作为 嘉宾 
重点 分 享 了 Sass 和 Compass， 也 正 是 这 样 一 个 机 会 ， 让 我 有 和 对 最 终结 识 了 李 松 峰 老 师 。 他 一 直 关 

















2 译 者 序 一 








注 国 际 前 沿 技 术 的 最 新 发 展 ， 总 希望 把 最 先进 最 好 的 东西 融 给 国内 的 开发 者 。 他 非常 认可 Sass 和 
Compass 的 发 展 思 路 ,促成 引进 了 了 《Sass 与 Compass 实 战 》 这 本 书 。 当 李 老 师 找到 我 说 想 请 我 翻译 
这 本 书 的 时 候 ， 我 便 一 口 应 人 允 下 来 ， 并 承诺 全 力 以 赴 ， 国 内 现在 太 缺 少 这 样 一 本 全 面 介绍 Sass 和 
Compass 的 书籍 了 。 
感谢 李 松 峰 老 师 对 本 书 提 出 的 修改 意见 ， 感 谢 李 静 老 师 对 本 书 最 后 审定 和 出 版 付出 的 努力 。 
最 后 ， 如 果 读 者 是 初次 接触 Sass 和 Compass， 我 相信 这 本 书 一 定 可 以 为 你 打下 非常 坚实 的 语 
言 基础 ， 使 你 进入 这 一 新 的 技术 领域 。 即 便 你 已 经 写 了 很 多 年 Sass 了 ， 本 书 也 一 定 能 够 加 深 你 对 
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样式 表 是 前 端 工 程 师 几乎 每 天 上 班 都 会 碰面 打招呼 的 侧 友 。 而 在 我 看 来 , 它 同 时 也 是 一 项 被 
同行 们 严重 低估 的 技术 。 很 多 人 觉得 样式 表 就 是 CSS， 写 起 来 繁 天 、 杜 燥 又 没有 技术 含量 。 但 很 
少 有 人 为 此 而 思考 : 这 是 命中 注定 的 吗 ? 撰 写 样 式 表 就 应 该 是 现在 这 个 方式 , 还 仅仅 是 因为 我 们 
习惯 了 撰 与 CSS? 也 许 我 们 的 工作 可 以 更 人 简单、 更 顺畅 、 效 果 更 好 ? 

说 到 这 里 ， 真 的 要 感谢 Sass 和 Compass， 更 要 感谢 Ruby 这 门神 奇 的 语言 以 及 它 神 奇 的 社区 力 
量 。 正 如 Ruby 的 作者 松本 行 维 所 说 :“ 我 们 需要 从 人 的 角度 考虑 问题 ， 人 们 怎样 编写 程序 或 者 怎 
样 使 用 机 融 上 的 应 用 程序 。 我 们 是 主人 , 它们 是 仆人 。 作为 一 套 基 于 Ruby 实 现 的 优秀 工具 ，Sass 
和 Compass 在 样式 表 这 个 领域 里 ， 把 这 句 话 体现 得 淋漓 尽 致 。 

通过 本 书 ， 你 将 领略 到 Sass 和 Compass 从 变量 、 混 合 帮 等 特性 ， 再 到 补 齐 CSS3 的 浏览 大 厂 和 阐 
前 级、 上 自动 化 生成 精灵 图 、 可 配置 路 径 等 全 方位 的 优势 。 本 书 的 讲解 浅显 易 懂 , 又 能 逐步 解 开 CSS 
开发 中 固有 的 次 层 问 题 ， 最 后 让 你 豁然 开明 。 

还 有 一 点 至 关 重 要 ，Sass 和 Compass 不 仪 是 开发 者 工具 , 而 且 还 是 Web 设计 师 的 设计 工具 (或 
许 前 后 颠倒 过 来 说 更 合适 )。 现 如 今 很 多 专业 之 间 的 界限 已 经 越 来 越 模 糊 了 ， 我 个 人 非常 期 待 
内 的 前 端 与 设计 因为 有 了 这 样 的 工具 ， 而 更 乐于 交融 在 一 起 。 

对 我 而 言 ， 翻 译本 书 的 过 程 ， 同 时 也 是 重新 认真 温习 Sass 和 Compass 的 宝贵 机 会 。 记 得 目 己 
第 一 次 看 到 Sass 时 就 被 次 深 地 吸引 , 果断 去 给 目 己 的 博客 重 构 了 主题 。 接 看 又 逐 潮 接触 到 Compass 
和 几 个 相关 扩展 , 一边 用 , 一边 感叹 相 见 恨 晚 。 后 来 我 把 它们 用 到 了 更 多 的 地 方 ， 顿 时 优越 感 十 
Æo 

如 果 你 还 没有 接触 过 类 似 Sass 的 CSS 预 编译 工具 ， 如 果 你 还 没有 体验 过 Compass 带 来 的 轻松 
与 便利 ， 那 么 相信 看 过 本 书 之 后 ， 你 一 定 会 迫不及待 地 跟 刀 耕 火 种 似 的 CSS 工 作 说 再 见 ， 全 面 拥 
抱 Sass 和 Compass。 

最 后 很 高 兴 能 和 优秀 的 图 灵 出 版 团队 一 起 工作 , 并 通过 译 书 的 方式 把 优秀 的 技术 和 知识 传递 
给 更 多 的 人 。 文 字 工 作者 在 我 眼中 一 直 是 非常 “高 大 上 ”的 ， 能 够 参与 其 中 ， 与 有 荣 看 。 

谢谢 ! 
















































































赵 锦 江 
2014 年 3 月 4 日 
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这 是 一 个 最 好 的 时 代 , 这 是 一 个 最 坏 的 时 代 。 互联 网 的 飞速 发 展 , 以 及 移动 设备 的 推波助澜 ， 
为 互联 网 从 业者 市 来 了 前 所 未 有 的 机 遇 。 从 来 没有 哪个 时 代 像 今天 这 样 ， 互联 网 能 受到 人 们 的 如 
此 青睐 ,并 在 人 类 的 生活 中 扮演 如 此 重要 的 角色 。 如 果 把 互联 网 开发 过 程 比 作 是 一 场 战役 , 那么 
前 问 工 程 师 和 设计 师 一 定 就 是 冲锋 陷 阵 的 排 凑 兵 , 他 们 永远 冲 在 开发 的 第 一 线 , 他 们 创造 的 是 用 
户 看 得 见 措 得 着 的 部 分 他们 的 体验 决定 了 用 户 的 体验 。 然 而 ， 随 着 项 目的 体积 越 来 越 大 ， 用户 
对 产品 设计 的 要 求 越 来 越 高 ， 样 式 表 的 体积 越 来 越 大 ,结构 也 越 来 越 复 杂 ， 每 次 对 样式 表 进 行 添 
加 和 修改 都 成 了 前 给 工作 者 的 中 梦 。 

好 在 我 们 有 了 Sass。 它 基于 普通 的 CSS,， 并 在 其 中 加 入 了 很 多 令 人 激动 的 特性 ， 比 如 混合 需 、 
黄 套 ， 以 及 函数 。Sass 完 全 终结 了 以 往 编写 样式 表 时 枯燥 无 味 的 过 程 ， 让 每 次 编写 样式 表 都 成 了 
一 次 充满 尺 喜 的 冒险 。 更 重要 的 是 ， 我 们 还 拥有 Compass， 它 在 Sass 的 基础 之 上 ， 封 装 了 一 系列 
模块 和 模板 ， 对 Sass 的 功能 进行 了 强 有 力 的 补充 。 借 助 Compass， 在 网 上 搜索 过 时 的 CSS 片 段 并 
插入 到 自己 的 CSS 文 件 这 样 的 做 法 已 经 成 为 过 去 时 ,我们 可 以 搜索 经 过 精心 设计 的 Compass 扩 展 ， 
并 轻松 地 将 它们 加 入 到 我 们 的 项 目 中 ， 同 时 能 在 第 一 时 间 得 到 扩展 的 更 新 。SassiFCSS 更 像 是 一 
门 语 言 ， 它 大 大 提高 了 CSS 代 人 码 的 可 重用 性 ， 并 让 我 们 能 够 编写 更 有 效率 的 CSS 代 人 码 。Compass 
为 CSS 添 加 了 模块 性 ， 我 们 可 以 像 拱 积木 一 样 ， 一 块 一 块 地 将 这 些 优秀 的 扩展 堆 登 起 来 ， 轻 松 创 
造 出 不 可 思议 的 效果 。 

Sass 和 Compass 不 仅 功 能 强大 ， 学 习 起 来 也 很 轻松 。 你 无 需 像 其 他 编程 语言 一 样 掌握 各 种 数 
据 结 构 和 编程 模式 ， 只 要 邵 悉 基本 语法 ,掌握 简单 的 逻辑 语句 ,借助 强大 的 内 置 饵 数 ， 就 可 以 很 
快 上 手 并 投入 实际 应 用 。 人 然而 ， 这 并 不 意味 着 Sass 和 Compass 束 如 此 简单 ， 即 使 你 已 经 有 了 多 年 
的 使 用 经 验 , 依然 能 从 其 中 发 现 新 的 东西 。 本 书 就 是 一 本 适合 于 所 有 开发 者 的 书 , 无论 新 手 还 是 
老手 ， 你 都 能 在 其 中 找到 想 要 的 东西 。 

最 后 , 要 衷心 感谢 字 松 峰 老 师 和 其 他 编辑 老师 ,这样 一 本 好 书 的 出 版 离 不 开 你 们 的 努力 和 帮 
助 。 同 时 也 要 感谢 男 外 两 位 优秀 的 译 者 ， 与 你 们 合作 ， 让 我 能 够 努力 把 事情 做 得 更 好 。 

编写 静态 的 CSS 已 经 成 为 过 去 时 ,创建 动态 样式 表 才 是 未 来 。 少 年 们 ， 快 行动 起 来 ， 时 代 在 
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天 于 本 书 


我 们 中 的 许多 人 都 从 社区 学 习 新 技术 , 比如 从 短篇 博文 或 徐 短 示例 中 学 习 样 式 特殊 处理 和 其 
他 技巧 。 本 书 旨 在 完整 地 介绍 两 个 工具 : Sass 和 Compass， 丰 宣读 者 的 CSS 工 具 箱 ， 使 他 们 成 为 
更 好 的 CSS 编 写 者 。 当 演示 示例 程序 时 ， 我 们 将 采取 系统 的 方式 来 讲解 Sass 的 语法 ， 并 将 相应 的 
模式 应 用 到 Compass 框 架 。 我 们 期 望 在 谈 完 本 书后 ， 你 能 对 Sass 和 Compass 有 一 个 全 面 的 理解 。 


本 书 读者 对 象 


本 书 主要 面 回 两 类 该 者 。 第 一 类 是 设计 师 ， 他 们 写 过 很 多 CSS 样 式 ， 但 可 能 未 及 思考 如 何 将 
多 个 部 分 的 样式 编写 过 程 目 动 化 。 第 二 类 是 全 栈 工 程 师 , 使 他 们 了 解 如 何在 一 个 项 目 从 开发 到 最 
后 上 线 的 生命 周期 中 ， 像 处 理 其 他 项 目 资源 一 样 处 理 样式 、 图 片 和 字体 文件 。 


路 线 图 


如 果 你 是 初次 接触 Sass 和 Compass， 那 么 最 好 先 谈 一 谈 附 录 A 和 附录 B， 其 中 包括 安 猴 指南 以 
及 学 习 本 书 所 需 的 其 他 知识 。 

第 1] 草 总 揽 Sass 的 强大 性 能 ， 它 不 仅 有 令 人 激动 的 特性 ， 还 会 市 给 你 不 同 于 静态 样式 枯燥 乏 
味 的 全 新 体验 。 我 们 还 将 通过 示例 引导 你 尝试 使 用 Compass 框 架 ， 这些 示 例 应 用 了 Sass 的 特性 构 
建 实 用 程序 。 

第 2? 草 更 次 和 人 地 介绍 Sass， 涵 盖 变 量 、 混 合 顺 以 及 其 他 一 些 语言 特性 。 它 们 是 本 书 其 余部 分 
的 基础 。 

第 3 草 专 注 于 探讨 应 用 最 为 广泛 的 CSS 网 格 布局 。 你 可 以 看 到 ，S$ass 能 帮助 你 轻松 达到 目的 。 

第 4 章 重 回 Compass 框 架 ， 以 更 广阔 的 视角 介绍 Compass 如 何 减少 样式 编写 过 程 中 的 宛 余 
Ap UK o 
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现 与 厂商 无 关 的 实现 。 

第 6 章 介 绍 关 于 CSS 精 灵 的 有 趣 实验 ， 这 是 每 位 设计 师 都 应 该 了 解 的 高 级 特性 。 

第 7 章 介 绍 如 何 通过 Compass 的 编译 功能 优化 样式 ,以 进行 开发 调试 和 发 布 部 署 。 以 此 为 基础 ， 
第 8 曹 介绍 如 何在 部 署 时 压缩 和 减 小 样式 体积 的 高 级 技巧 。 





















































2 关于 本 书 


第 9 章 介 绍 Sass 的 高 级 脚本 技术 ， 高 级 开发 者 将 受益 菲 浅 。 第 10 章 扩展 了 这 一 主题 ， 告 诉 你 
如 何 编写 上 自己 的 Compass 插 件 。 


代码 约定 和 下 载 


代码 清单 和 正文 中 的 源 代码 使 用 等 宽 字 体 。 很 多 代码 清单 和 用 粗 体 显示 的 重要 概念 都 有 代码 
注释 。 有 时 ， 代 码 清 单 中 还 会 给 出 数字 符号 ， 而 相应 的 解释 在 下 文中 。 

本 书 的 源 代 码 可 以 从 Manning 的 网 站 下 载 : www.manning.com/SassandCompassinAction, 代码 
如 有 变动 会 及 时 更 新 到 : https://github.com/pengwynn/sass-and-compass-in-action. 


作者 在 线 


购买 本 书 ， 你 可 以 访问 由 Manning 出 版 社 运行 的 一 个 内 部 论坛 ， 可 以 在 这 里 发 表 关 于 本 书 的 
评论 ， 询 问 技术 问题 ， 并 得 到 作者 和 其 他 用 户 的 帮助 。 为 了 访问 论坛 并 注册 ， 请 打开 
www.manning.com/SassandCompassinAction。 网 页 上 介绍 了 注册 后 进入 论坛 的 方法 ， 可 以 获得 什 
么 帮助 ， 以 及 论坛 的 规则 是 什么 。 

Manning 出 版 社 承 诺 在 读者 之 间 以 及 读者 和 作者 间 建 立 有 意义 的 交流 平台 。 但 并 不 承诺 本 书 
的 部 分 作者 一 定 会 参与 其 中 ， 作 者 在 论坛 上 所 做 的 一 切 贡献 都 是 目 愿 的 〈 且 是 无 偿 的 )。 我们 建 
以 你 和 莹 试 提出 一 些 吝 有 挑战 的 问题 ， 这 样 可 以 激发 他 们 的 兴 

只 要 书 一 出 版 ，Author Online 论 坛 和 以 前 的 讨论 内 容 就 可 以 从 出 版 社 的 网 站 访问 。 























大 于 封面 插图 








本 书 封面 插画 的 标题 为 “斯 兰 卡 "， 她 是 居住 在 盖 尔 河谷 的 斯 拉夫 人 。 斯 洛 文 尼 亚 人 把 这 条 
河 称 为 Zija。 这 条 河 起 源 于 奥地利 南部 ， 流 经 尤 里 安 阿尔 里 斯 山 很 多 风景 如 画 的 地 方 。 该 插画 来 
日 克罗地亚 斯 普 利 特 民族 博物 馆 2008 年 出 版 的 Balthasar Hacquet 的 《图 说 西南 及 东 汪 达尔 人 、 伊 
利 里 亚 人 和 斯 拉夫 人 》( Images and Descriptions of Southwestern and Eastern Wenda, Illyrians, and 
Slavs ) 的 最 新 重印 版 本 。 

Hacquet ( 1739—1815 ) 是 一 名 奥地利 内 科 医 生 及 科学 家 ， 他 花费 数 年 时 间 去 研究 各 地 的 植 
物 、 地 质 和 人 种 ， 这 些 地 方 包括 奥 铭 六 国 的 多 个 地 区 ， 以 及 伊利 里 亚 部 洛 过 去 居住 的 (罗马 冰 
的 ) 威 尼 托 地 区 、 尤 里 安 阿尔 插 斯 山脉 及 西 巴尔 干 等 地 区 。Hacquet 发 表 的 很 多 论文 和 书籍 中 都 
有 于 绘 插图 。 

Hacquet 出 版 物 中 丰富 多 样 的 插图 生动 地 描绘 了 200 年 前 西 阿尔 宪 斯 和 巴尔 干 西北 地 区 的 独 
特性 和 个 体 性 。 那 时 候 相距 几 届 里 的 两 个 村 庄村 民 的 衣着 都 巡 然 不 同 ， 当 有 社交 活动 或 交易 时 ， 
不 同 地 区 的 人 们 很 容易 通过 着 装 来 辨别 。 从 那 之 后 着 法 的 要 求 发 生 了 改变 , 不 同 地 区 的 多 样 性 也 
逐渐 消亡 。 现 在 很 难说 出 不 同 大 陆 的 居民 有 多 大 区 别 ， 比 如 ， 现 在 很 难 区 分 斯 治文 尼 亚 的 阿尔 卑 
斯 山地 区 或 巴尔 干 沿海 那些 美丽 小 镇 或 对 庄 里 的 居民 与 欧洲 其 他 地 区 或 美国 的 居民 。 

Manning 出 版 社 利 用 两 个 世纪 之 前 的 服 冯 来 设计 书籍 封面 , 以 此 来 赞 颁 计 算 机 产业 所 具有 的 
创造 性 、 主 动 性 和 趣味 性 。 正 如 本 书 封面 的 图 片 一 样 ， 这 些 图 片 也 把 我 们 市 回 到 了 过 去 的 生活 
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如 有 果 没 有 Hampton Catlin, 我 们 不 可 能 写 这 本 关于 S$ass 和 Compass 的 书 。 对 于 我 们 许多 人 来 说 ， 
是 Sass 让 CSS 重 焕 青 春 。 这 个 过 程 中 ， 尽 管 语法 在 变化 ， 但 是 扩展 CSS 以 使 它 变 得 更 加 易 用 、 
高 效 的 精神 从 未 改变 。Hampton Catlin 独 到 的 眼光 和 努力 在 Sass 的 项 目 和 社区 留 下 了 不 可 麻 灭 的 
ED. 

Chris Eppstein ， 也 是 本 书 的 作者 之 一 ， 请 接受 我 们 最 真诚 的 感谢 。 如 果 不 是 你 在 过 去 几 年 不 
和 群 筋 吉 地 扩展 和 维护 Sass 与 Compass， 社 区 绝对 不 会 如 今天 这 么 壮大 。 

我 们 还 要 感谢 Manning 的 出 版 团队 ， 为 了 让 这 本 书 出 版 ， 他 们 与 我 们 一 起 奋战 ， 共 同 走 过 了 
一 段 非常 漫长 的 旅程 。 通 常 ， 为 一 个 开源 项 目 写 书 是 非常 难 的 ， 因 为 项 目 长 期 处 于 发 展 之 中 。 
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认识 Sass #9 Compass 


本 书 的 第 一 部 分 会 带 你 初步 认识 Sass 和 Compass， 了 解 Sass 的 核心 特性 并 学 习 编 写 动态 样式 
的 一 些 原则 。 第 1 章 首 先 介 绍 编 写 动 态 样 式 的 概念 ， 以 及 让 动态 样式 开发 更 高 效 的 相关 开发 原 
则 。 你 将 看 到 Sass 如 何 通 过 选择 如 格 人 套 和 变量 来 帮助 避免 重复 ， 以 及 通过 使 用 继承 和 混合 絮 让 
你 能 够 更 加 高 效 地 重用 通用 样式 。 我 们 将 学 习 Compass 框 架 ， 看 看 它 怎 样 通 过 提供 模式 和 工具 让 
站 点 的 样式 编写 更 加 顺畅 和 高 效 。 

第 2 章 将 带 你 认识 Sass 语 法 以 及 Sass 的 许多 强大 功能 。 我 们 共同 探讨 如 何在 Sass 中 使 用 变 
量 ， 并 学 习 变量 的 作用 域 。 本 章 将 介绍 如 何 通 过 和 能 套 选择 器 和 子 属 性 让 样式 表 更 加 整洁 和 易 
读 。 你 还 会 了 解 Sass 怎 样 通过 扩展 原生 CSS 的 eimport 实 现 将 许多 样式 合并 到 一 个 文件 的 功能 ， 
这 样 你 就 可 以 把 你 的 样式 分 散 到 多 个 更 小 的 、 可 管理 的 文件 中 。 我 们 一 起 看 看 如 何 通 过 使 用 混 
合 器 在 避免 重复 的 同时 共享 通用 的 样式 ， 以 及 如 何 通 过 给 混合 器 传 参 ， 在 混合 器 中 使 用 变量 ， 
在 保留 样式 类 型 的 同时 可 以 轻松 定制 样式 。 你 将 学 习 使 用 另 一 个 可 以 减少 重复 的 方法 : 选择 右 
继承 eextend， 以 及 何 时 使 用 继承 ， 何 时 使 用 混合 绢 ， 使 用 它们 的 最 佳 实践 。 

读 完 前 两 章 ， 你 对 Sass 语 法 就 不 再 陌生 ， 并 且 对 于 如 何 改进 样式 有 了 灵感 。 而 且 ， 你 将 对 
动态 样式 表 的 真 诺 了 然 于 胸 。 下 一 部 分 将 从 理论 转 到 实战 ， 使 用 Sass 和 Compass 来 解决 一 些 真实 
世界 中 的 问题 。 














Sass 和 Compass 让 样式 表 
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本 章 内 容 

口 开始 学 习 Sass 和 动态 样式 表 
O 用 Sass 更 高 效 地 写 样式 表 
口 Compass 人 简介 


口 用 Compass 了 迎接 工程 实践 中 的 样式 挑战 








Sass 是 CSS3 语 言 的 扩展 , 它 能 帮 你 更 省 事 地 写 出 更 好 的 样式 表 , 使 你 摆脱 重复 劳动 , 使 工作 
更 有 创造 性 。 因 为 你 能 更 快 地 拥抱 变化 ,你 也 将 敢于 在 设计 上 创新 。 你 写 出 的 样式 表 能 够 目 如 地 
应 对 修改 颜色 或 修改 HTML 标签 , 并 编译 出 标准 的 CSS 代 人 码 用 于 各 种 生产 环境 。Sass 引 擎 是 用 Ruby 
写 的 ， 对 此 你 无 需 在 意 ， 除 非 要 修改 这 个 引擎 的 Ruby 人 代码。 

这 本 书 适 合 两 类 谈 者 ,并 尝试 挖掘 出 他 们 之 间 的 共同 点 。 如 有 果 你 发 现 自己 两 类 都 符合 , 那 再 
好 不 过 本。 

对 于 Web 设 计 师 小 伙伴 们 : 你 熟 记 着 Adobe 应 用 的 各 种 快捷 键 ， 仪 根据 RGB 值 就 能 选 出 互补 
色 。 你 或 许 (或 许 没有 ) 戴 者 一 副 黑 框 眼 镜 ， 很 可 能 用 一 杯 咖 啡 或 人 杂 和 最 新 的 Smashing Magazine 
开始 新 的 一 天 。 你 十 分 了 解 jQuery 很 危险， 却 不 明日 为 什么 开发 小 伙伴 会 突 你 把 CSS 当 做 一 门 
语言 。 

我 们 将 帮 你 摆脱 这 些 又 元 乏味 的 琐事 , 让 你 做 最 擅长 的 事 一 一 创新 。 我 们 知道 你 对 样式 重 置 、 
排版 比例 、 闫 色 调和 以 及 布局 很 有 想法 。 我 们 将 回 你 展示 怎样 通过 更 少 的 重复 萎 动 , 更 快 地 写 出 
样式 表 。 从 此 ， 你 将 在 图 形 软件 上 费时 更 少 ， 而 在 样式 表 上 做 得 更 多 。 

对 于 前 端 开 发 同学 : 你 们 能 够 在 Photoshop 设 计 稿 上 切 图 , 然后 转化 为 语义 化 的 HTML 和 CSS。 
但 是 有 个 问题 , 你 的 服务 端 模 板 那 么 符合 DRY 原 则 ，, 即 “ 别 做 重复 劳动 ”( Don't Repeat Yourself ), 
但 你 的 样式 表 也 太 不 符合 这 个 原则 了 吧 ! 而 且 , 随 看 项 目 规模 的 增长 ,你 发 现 组 织 样式 表 成 了 一 
大 挑战 。 要 是 能 像 写 项 目 中 其 他 代码 那样 ,使 用 变量 、 可 复 用 模块 以 及 控制 语句 来 写 样式 表 就 好 
了 了 。 别 担心 ，Sass 正 好 满足 了 你 的 需求 。 

本 章 将 介绍 Sass 的 强大 特性 ， 比 如 选择 各 和 鹏 僚 、 变 量 、 混 合 人 各、 选择 如 继 承 ， 以 及 Compass 


















































1.1 开始 学 习 Sass 3 


怎样 利用 这 些 特性 构建 可 复 用 的 设计 模式 , 从 而 使 你 摆脱 重复 性 的 体力 劳动 ， 专注 于 设计 样式 而 
不 是 实现 样式 。 如 果 你 还 没有 安装 Sass， 请 参照 附录 A 中 给 出 的 步骤 安装 Sass。 如 果 你 正在 咖啡 
馆 用 iPad 阅 读本 书 ， 那 仍然 可 以 在 线 运行 那些 基本 示例 : http://Sass-lang.com/try.html。 


1.1 开始 学 习 Sass 


在 开始 研究 示例 之 前 ， 有 必要 明确 几 点 。Sass 既 不 是 银 弹 也 不 是 精灵 粉 。 它 不 能 帮 你 立刻 选 
出 颜色 ,做 好 排版 和 布局 , 但 能 帮 你 更 快 地 实现 你 的 想法 并 减少 麻烦 。 在 开始 学 习 语 法 和 特性 之 
前 ， 先 看 一 下 工作 流 的 概况 图 。 使 用 Sass 时 ，Sass 引 擎 将 你 的 样式 表 源 文件 编译 成 100% 纯 CSS， 
如 图 1-1 所 示 。 


开发 


e» 
asp» i i (^ > EX LE 
* css 


Sass*5| $E 





图 1-1 Sass 编 写 和 编译 的 工作 流 
从 命令 行 到 服务 端 集成 框架 ， 再 到 图 形 用 户 界 面 (GU) 工具 ， 虽 然 有 各 种 选择 来 运行 Sass 
引擎 ， 但 这 一 工作 流 中 的 关键 环节 是 输出 CSS。 人 然后 你 可 以 像 平常 那样 部 团 静 态 的 CSS 文 件 ， 而 
Sass 的 语言 特性 使 你 能 更 快 地 写 出 具有 高 可 维护 性 的 CSS 代 码 。 











1.1.1 从 CSS 到 Sass 


如 有 果 你 精通 CSS， 很 快 就 能 上 手 Sass。Sass 更 专注 于 怎样 创造 优雅 的 样式 表 ， 而 非 其 内 容 。 
我 们 会 介绍 一 些 为 你 提供 CSS 最 佳 实践 的 工具 (如 Compass ), 不 过 归根 结 底 ， 如 果 你 拥有 扎实 的 
CSS 基 础 即 能 从 本 书 中 获 益 匪 浅 。 在 计算 机 领域 ， 错 进 ， 错 出 (garbage in, garbage out ) 原则 总 是 
成 立 的 。 如 果 你 需要 一 本 CSS 入 门 书 ， 请 参阅 Manning 出 版 的 Hello! HTML5 and CSS3。 

Sass 支 持 两 种 语法 。 最 初 的 缩 进 式 语 法 使 用 .sass 作 为 文件 扩展 名 ， 且 这 种 语法 对 空格 敏感 ， 
所 以 选择 硕 下 面 的 属性 要 有 缩 进 ， 而 不 用 花 括 所 括 起 来 。 每 个 属性 之 间 通 过 换行 来 分 了 哺 ， 而 不 是 


分 号 : 











h1 
color: #000 
background: #fff 


SCSS 即 Sassy CSS 在 Sass 3.0 中 被 引入 ， 它 是 CSS3 的 超 集 。SCSS 文 件 使 用 .scss 作 为 文件 扩展 
名 ， 且 到 处 都 是 熟悉 的 花 括号 和 分 号 。 
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hl (color: 4000; background: #fff] 

以 上 展示 了 这 两 种 场 法 的 主要 不 同 ， 其 他 的 不 同 点 在 附录 C 中 讨论 。 

这 两 种 语法 Sass 都 会 继续 文 持 。 你 甚至 可 以 在 同一 个 项 目 中 混合 使 用 ， 只 要 不 在 同一 个 文件 
中 使 用 即 可 。 选 择 一 种 对 你 和 你 的 团队 而 言 适合 的 语法 是 很 重要 的 。 如 有 果 你 周围 的 人 都 用 Python 
或 Ruby, 那么 可 能 空格 敏感 的 缩 进 式 语法 会 很 适合 。 如 采 你 的 团队 与 外 面 的 设计 机 构 做 生意 , 那 
么 使 用 Sassy CSS 将 更 容易 成 功 。 

除了 学 习 CSS 技 巧 和 和 擎 握 Sass 语 法 ， 以 动态 的 思维 去 看 竺 样式 表 也 很 重要 。 























1.1.2 ”动态 思维 


现在 除了 简单 的 说 明 书 式 的 网 站 ， 谁 还 会 去 写 很 多 静态 的 HTML?” 你 把 HTML 文 件 以 模板 的 
形式 提供 给 博客 引擎 、 内 容 管理 系统 (CMS ) 或 应 用 程序 的 框架 去 做 预 处 理 , 然后 动态 地 “ 填 人 ” 
标签 和 内 容 。 这 些 工 具 为 HTML 注入 了 生命 ,我 们 无 法 想象 没有 它们 互联 网 将 会 变 成 怎样 。 所 以 
你 为 什么 还 要 再 写 静 态 的 样式 表 呢 ? 你 将 会 看 到 那些 被 用 来 动态 创建 静态 标签 的 特性 , 也 可 以 用 
来 动态 创建 静态 样式 表 。 何 为 动态 创建 静态 样式 表 ? 意思 即 : 当 你 写 样式 表 时 , 不 再 受 限 于 浏览 
器 是 怎样 理解 样式 表 的 。 通 过 条 件 判 断 、 可 复 用 的 代码 片段 、 变 量 以 及 其 他 的 各 种 工具 ， 你 能 够 
让 样式 表 活 起 来 。 改变 一 个 网 站 的 布局 和 颜色 风格 变 得 如 此 简单 ， 只 要 稍微 调整 一 些 变量 就 可 以 
了 。 当 然 ， 虽然 Sass 人 允许 你 以 一 种 时 此 的 方式 来 动态 地 写 样式 表 ， 但 产 出 的 依旧 是 100% 静 态 的 
CSS, 一 旦 你 开始 使 用 动态 样式 表 来 工作 ， 就 能 遵循 内 心 深 处 一 直 呐 喊 的 声音 “ 别 做 重复 劳动 ”。 


1.1.3” 别 做 重复 劳动 


Sass 为 样式 表 的 作者 提供 了 强大 的 工具 , 帮 他 们 摆脱 在 写 CSS 时 那些 一 所 又 一 过 的 乏味 郁 动 。 
Sass 的 很 多 特性 都 信奉 广 为 流传 的 编程 格言 “ 别 做 重复 劳动 "， 计 你 既 能 在 写 样式 表 时 减少 重复 
入 动 ， 又 能 减少 编译 出 的 样式 表 中 的 见 余 。 创 建 样 式 表 时 ,重复 就 是 一 种 危险 信和 号。 你 应 该 时 第 
HAC: 我 怎样 更 高 效 地 工作 ,而 不 仅仅 是 更 卖力 ? 接 下 来 几 市 将 向 你 展示 怎样 使 用 Sass 来 提升 
样式 表 的 可 复 用 性 。 


1.2 Sass 你 好 : 消除 样式 表 宛 余 


写 到 这 里 我 们 已 经 晓 蔬 很 多 遍 “ 别 做 重复 劳动 ”了 。 那么 充满 见 余 的 样式 表 是 什么 样 的 呢 ? 
请 看 代码 清单 1-1 中 的 CSS。 


代码 清单 1-1 一 个 需要 消除 元 余 的 糟糕 样式 表 


hidbrand (color: #1875e7} 
































dsidebar { background-color: #1875e7} 


ul.nav {float: right} 


1.2 Sass: 消除 样式 表 宛 余 5 


ul.nav li {float: left;} 
ul.nav li a {color: #111} 
ul.nav li.current {font-weight: bold;)j 


#header ul.nav (float:right;] 

#header ul.nav li ([float:left;margin-right:10px;]) 
footer ul.nav ímargin-top:1em;]) 

#footer ul.nav li (float:left;margin-right:10px;]) 


即使 是 这 样 一 个 极其 简单 的 例子 , 但 显而易见 还 是 有 很 多 重复 劳动 。 如 果 市 场 团队 想 要 把 那 
可 爱 的 蓝 色 阴影 从 #1875e7 调 整 成 #0f86e3, 将 会 发 生 什么 ”当然 , 只 有 两 处 修改 的 话 还 是 可 控 
的 ， 但 如 果 有 十 几 处 或 更 多 处 修改 散落 在 不 同 的 文件 当中 ,那么 “查找 / 符 换 ”这 种 方式 就 会 显 
得 很 原始 ， 不 是 吗 ? 另外 ，8 个 ul.nav 在 只 有 10 行 的 样式 表 中 也 显得 太 多 了 。 

在 接 下 来 的 小 节 中 , 你 将 会 学 到 一 些 写 起 来 犹如 夏 日 微风 般 异 意 的 语法 糖 , 它们 将 会 帮 你 摆 
脱 样式 表 中 的 重复 务 动 , 它们 包括 变量 、 混 合 顺 、 选 择 融 般 套 以 及 选择 需 继 到。 如 有 果 你 觉得 学 习 
进度 太 快 了 ， 别 怕 ， 第 2 章 会 深入 介绍 每 个 概念 。 


1.2.1 通过 变量 来 复 用 属性 值 


你 是 否 在 样式 表 中 用 过 “查找 / 蔡 换 ”来 修改 十 六 进 制 的 颜色 值 ? 使 用 Sass, 你 可 以 把 属性 值 
赋 给 变量 ， 然 后 在 一 个 地 方 管理 散落 在 各 处 的 属性 但 ,几乎 任意 属性 值 都 可 以 赋 给 变量 ， 比 如 凑 
色 ， 边 框 大 小 : 


Scompany-blue: #1875e7; 












































hi#brand { 
color: $company-blue; 


} 


#sidebar { 
background-color: $company-blue; 


) 

ABRAVASTISJFXR, "P ELS BURCH HMECSSZSA WIEN. AiE PRRP. TEXT fRl 
单 的 例子 中 ， 如 条 你 想 要 微调 蓝 色 阴 影 ， 只 需要 修改 变量 赋值 的 那 一 处 地 方 ,使 用 变量 的 其 他 地 
方 就 会 日 动 更 新 。 

如 采 你 有 开发 背景 , 会 对 变量 感觉 目 然 而 然 。 如果 你 只 有 设计 背景 , 第 一 眼看 到 变量 可 能 会 
觉得 有 点 陌生 。 但 它 真 的 不 是 什么 新 鲜 事 物 。 你 已 经 在 CSS 中 使 用 过 很 多 有 和 名字 的 属性 值 ， 比 如 
blue, green, inherit, block, inline-block, serif] X sans-serif.» Tp Zo gr AH 28 py. 
pU PEPERBU EE. Be POE. dd AEST S He BERE EZ JARE EA, Mangas 
SD MEM 


1.2.2 feRHEU EK Dos E d 2 ERIEBIGHE S 
HRANE. AARAA, fl TCAE h EASP ER 9871 EE RATE: 
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做 得 最 好 的 那个 , 画 了 10 英 里 。 但 接 下 来 工作 成 采 迅 速 降低 ， 第 二 个 星期 他 画 了 五 英里 ， 第 三 个 
星期 只 男 了 两 英里 , 第 四 个 星期 只 画 了 了 可怜 的 一 英里 。 主管 问 他 遇 到 了 什么 困难 。 他 回答 道 : UE, 
回 到 桶 边 的 距离 总 是 变 得 越 来 越 远 。” 

这 感 党 正 像 使 用 多 层级 的 选择 各。 请 看 下 面 的 CSS: 


ul.nav {float: right) 

ul.nav li {float: left: 

ul.nav li a {color: #111} 

ul.nav li.current {font-weight: bold;} 


Sass 能 帮 你 减少 一 些 重复 劳动 。 在 第 1 草 的 代码 示例 文 件 夹 中 找到 文件 。1.1.2.nesting.scss， 
或 者 将 代码 清单 1-2 保 存 为 一 个 文本 文件 ， 创 建 你 目 己 的 代码 文件 。 


代码 清单 1-2 骸 套 CSS 的 选择 入 


ul.nav { 
floats right; 














li 1 
float: left; 
a ( 
color: #111; 
} 
&.current { 
font-weight: bold; 
} 
} 
} 


在 终 闪 中 运行 如 下 sass 命 令 ， 并 传人 文件 的 路 径 : 
Sass 1.2.nesting.scss 


你 将 会 在 终 站 输出 中 得 到 如 代码 清单 1-3 所 示 的 CSS 结 采 。 


代码 清单 1-3 ”通过 使 用 选择 硕 肯 套 生 成 的 CSS 


ul.nav 1 
float: right; } 
ul.nav li { 
float: left; } 
ul.nav li a { 
colors #111; } 
ul.nav li.current ( 
font-weight: bold; ) 


除了 格式 上 的 一 些 不 同 ， 它 跟 我 们 一 开始 的 CSS 是 相同 的 。( 别 在 意 目 前 的 格式 ， 后 面 会 讨 
论 更 多 输出 选项 。) 

使 用 Sass， 你 可 以 将 规则 吝 套 起 来 ， 并 避免 在 选择 侣 中 重复 写 相 同 的 元 素 。 这 不 仪 市 约 了 时 
间 ， 还 有 一 个 好 处 是 ， 如 条 你 稍 后 要 把 ul .nav 从 一 个 无 序列 表 改 成 有 序列 表 ， 你 只 需要 修改 一 
处 。 这 个 例子 中 的 最 后 一 个 选择 天 原理 相同 。g 符 号 是 父 选 择 器 。 在 这 个 例子 中 ，&.current 相 














1.2 Sass: 消除 样式 表 宛 余 7 





当 于 1i .curzrent。 如 果 将 来 11 改 成 了 其 他 的 元 素 标签 ,在 这 个 元 素 内 的 current 类 依然 命中 这 
里 的 样式 。 现 在 你 已 经 见 过 了 怎 WERE tige dd HUBTEB. EUREBEUH BUE S Ze ESRB YETESS , 
Bi PRLR —X E^. EUEHIR Gr 


1.2.8 ”使 用 混合 器 来 复 用 一 段 样式 


变量 使 你 能 够 复 用 属性 值 , 但 如 果 你 想 要 复 用 一 大 段 规则 呢 ? 传统 的 做 法 是 , 如果 在 样式 表 
中 发 现 重 复 ， 就 会 把 公共 的 规则 抽 离 出 来 放 到 新 的 CSS 类 中 。 


代码 清单 1-4 ”传统 的 CSS 重 构 


ul.horizontal-list li ( 
float: left; 
margin-right: 10px; 

} 

















#header ul.nav { 
float: right; 
} 


#footer ul.nav { 
margin-top: lem; 


} 

接 下 来 你 需要 给 元 素 ul .nav 添 加 额外 的 类 名 horizontal-1ist。 这 种 方式 能 够 有 效 地 工 
作 ， 但 如 果 你 想 要 使 类 保持 语意 的 同时 依旧 可 复 用 ， 怎 么 实现 呢 ? 

打开 1.1.2.mixins.scss， 或 者 自己 创建 一 个 新 文件 ， 代 码 清单 1-5 是 第 二 个 例子 。 


代码 清单 1-5 “通过 使 用 emixin 和 eincluqe 重 用 代码 


Qmixin horizontal-list ( 
li 4 
float: left; 
margin-right: 10px; 
} 
} 





#header ul.nav { 
Qinclude horizontal-list; 
float: right; 

} 


#footer ul.nav { 
Qincludqe horizontal-list; 
margin-top: 1em; 


) 

顾名思义 ，S$ass 混 合 融 用 于 将 一 些 规 则 混入 到 别 的 规则 当中 。 使 用 emixin 命 令 ， 你 可 以 将 
水 平 列 表 的 规则 抽取 出 来 放 到 一 个 合适 的 命名 混合 器 中 。 然 后 使 用 eincluae 命 令 ， 将 这 些 规 则 
引入 进来 。 因 此 你 不 再 需要 .horizontal-1ist 类 ， 因 为 那些 规则 已 经 被 混和 人 到 ul .nav 的 规则 
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当中 ， 输 出 的 CSS 如 代码 清单 1-6 所 示 。 
代码 清单 1-6 ”混合 需 帮 助 你 消除 元 余 代 码 


#header ul.nav { 
float: right; 
} 


#header ul.nav li { 
float: left; 
margin-right: 10px; 

} 


#footer ul.nav { 
margin-top: lem; 


} 


#footer ul.nav li { 
float: left; 
margin-right: 10px; 

} 


更 便利 的 是 混合 器 和 变量 的 结合 ,这 才 是 混合 器 的 强大 之 处 ; 也 就 是 说 ,能 够 根据 参数 来 决 
定 使 用 的 样式 ， 从 而 使 混合 器 更 具 可 复 用 性 。 举 个 例子 ,假如 你 想 要 修改 水 平 列 表 每 个 条 目 之 间 
的 间距 ， 怎 么 使 用 混合 需 快 速 实现 呢 ? 找到 代码 示例 1.1.2.2.mixins-parameters.scss， 按 照 代 码 清 
单 1-7 对 它 进 行 修改 。 


代码 清单 1-7 ”在 混合 器 中 应 用 变量 


Qmixin horizontal-list($spacing: 10px) { 
li 4 
float: left; 
margin-right: $spacing; 
} 
} 








#header ul.nav { 
@Qinclude horizontal-list; 
float: right; 

} 


#footer ul.nav { 
@include horizontal-list (20px); 
margin-top: lem; 


} 


OK ， 我 们 给 混合 需 添 加 了 一 个 参数 sspacing， 其 默认 值 为 10px。 参 数 这 一 概念 跟 我 们 之 
前 看 到 的 变量 没有 什么 不 同 。 在 这 个 例子 中 通过 使 用 默认 值 , 头 部 的 水 平 导 航 列 表 就 得 到 默认 的 
间距 。 在 底部 的 导航 列表 中 ,通过 传人 值 20px， 从 而 增加 列表 元 素 之 间 的 间距 , 输出 的 CSS 如 代 
码 清单 1-8 所 示 。 
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代码 清单 1-8 通过 使 用 混合 带 生成 的 最 终 CSS 


dheader ul.nav { 
float: right; 
} 


#header ul.nav li { 
float: left; 
margin-right: 10px; 

} 


#footer ul.nav { 
margin-top: 1em; 


} 


#footer ul.nav li { 
float: left; 
margin-right: 20px; 

} 


混合 如 能 够 让 你 复 用 一 段 属性 ， 从 而 为 你 市 省 大 量 时 间 。 不 过 聪明 的 读者 或 许 发 现 了 输出 的 
样式 表 中 有 元 余 , 这 是 因为 混合 带 在 每 一 个 被 包含 进来 的 地 方 , 都 会 就 地 复制 一 段 样式 。 别 担心 ， 
Sass 总 留 有 一 手 。 选 择 太 继 承 就 可 以 解决 这 个 问题 。 


1.2.4 使 用 选择 器 继承 来 避免 重复 属性 


如 你 所 见 ， 混 合 需 能 够 在 手写 的 样式 表 中 有 效 地 避免 重复 。 但 是 ,因为 规则 都 混和 人 到 其 他 类 
中 ， 所 以 在 输出 的 样式 表 中 不 能 完全 避免 重复 。 因 为 输出 的 CSS 文 件 大 小 很 重要 ， 于 是 Sass 引 和 
了 邦 一 种 稍微 有 点 复杂 的 方式 ， 让 输出 的 CSS 完 全 避免 重复 。 选 择 锅 继 兴 的 意思 就 是 让 一 个 选择 
俗 能 够 复 用 旋 一 个 选择 带 的 所 有 样式 ,但 又 不 重复 输出 这 些 样式 属性 。 看 个 例子 你 就 明月 了 ,， 比 
如 ， 为 表单 的 错误 信息 设置 一 些 样式 。 


代码 清单 1-9 ”修饰 错误 信息 的 CSS 


.error { 
border: 1px #f00; 
background: #fćfdd; 
} 

















.error.intrusion { 
font-size: 1.2em; 
font-weight: bold; 

} 


.badError { 
Qextend .error; 
border-width: 3px; 
} 


通过 选择 融 继承 ， 可 以 让 .barError 继 承 父 类 .error， 也 就 是 复 用 父 类 的 所 有 样式 ， 编 详 
输出 的 结果 如 代码 清单 1-10 所 示 。 
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代码 清单 1-10 ”通过 选择 种 继承 减少 元 余 


.error, .badError 1 
border: 1px $f00; 
background: #fdd; 

} 


.error.intrusion, 
.badError.intrusion { 
font-size: 1.2em; 
font-weight: bold; 

} 


.badError { 
border-width: 3px; 
j 








在 这 个 例子 中 ， 同 时 定义 了 error 和 baqError 类 是 有 意义 的 ， 因 为 两 者 都 需要 在 HTML 中 
使 用 , 但 有 时 父 类 并 不 需要 在 HTML 中 使 用 。 于 是 在 Sass 3.2 中 引入 了 占 位 选择 硕 , 它 文 持 在 使 用 
选择 需 继 承 的 同时 ， 不 编译 输出 HIML 中 并 不 使 用 的 父 类 ， 如 代码 清单 1-11 所 示 。 
代码 清单 1-11 在 选择 大 继承 中 使 用 占 位 选择 此 


%button-reset { 





margin: 0; 

padding: .5em 1.2em; 
text-decoration: none; 
cursor: pointer; 


} 


.save { 
Qextend $button-reset; 
color: white; 
background: #blue; 

} 


.delete { 
Qextend $button-reset; 
color: white; 
background: red; 


} 


点 位 顾名思义 ， 继 承 了 gsbutton-reset 的 选择 融 在 输出 的 CSS 中 占据 了 sbutton-reset 的 
人 位置， 如 代码 清单 1-12 所 示 。 


代码 清单 1-12 ”通过 选择 融 继 承 最 终生 成 的 CSS 


.Save, .delete { 
margin: 0; 
padding: .5em 1.2em; 
text-decoration: none; 
cursor: pointer; 
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.Save { 
color: white; 
background: #blue; 
} 


.delete { 
color: white; 
background: red; 


} 

占 位 选择 各 能 把 常用 的 样式 保存 到 一 处 ,是 不 影响 任何 一 个 类 名 , 使 你 能 够 放心 使 用 。 当 然 
如 果 一 个 占 位 选择 间 没 有 人 被 继承 ， 其 中 的 样式 就 不 会 被 编译 到 CSS 当 中 ， 以 减少 生产 环境 中 样式 
表 的 无 用 样式 ， 使 其 更 小 。 

只 需要 一 点 小 小 的 规划 ， 选 择 需 继承 就 能 够 让 你 摆脱 写 $Sass 代 人 码 时 的 重复 筋 动 ， 并 让 输出 的 
CSS 文 件 保持 整洁 。 现 在 你 已 经 看 到 Sass 怎 样 帮 你 避免 重复 劳动 了 ,下 一 方 将 介绍 Compass 的 功能 。 








1.3 Compass 是 什么 


简单 来 说 ，Compass 是 一 个 强大 的 Sass 框 架 ， 它 的 设计 目标 是 顺畅 、 高 效 地 帮 扮 互联 网 ， 使 
用 它 的 人 可 写 出 可 维护 性 更 高 的 样式 表 , 而 它 已 被 授权 给 由 设计 师 和 开发 者 组 成 的 社区 来 共同 构 
建 和 分 享 。 互联 网 应 用 的 开发 框架 有 很 多 , 比如 Rails 就 是 面向 Ruby 的 一 个 框架 , 类 似 地 , Compass 
就 是 面 品 Sass 的 一 个 框架 ， 它 有 一 套 实用 的 工具 ， 并 在 长 期 的 实战 中 总 结 出 了 最 佳 实践 。 

Compass 由 三 个 主要 部 分 组 成 : 混合 硕 和 实用 工具 的 类 库 ， 能 够 集成 到 应 用 开发 环境 中 的 开 
发 系统 ,以 及 一 个 用 于 构建 框架 和 扩展 的 平台 ,让 我 们 将 本 章 之 前 提 到 的 工作 流 概况 图 扩展 一 下 ， 
如 图 1-2 所 示 ， 我 们 可 以 看 到 Compass 如 何 融 入 到 你 的 开发 工作 流 中 。 

















Compass 模 式 


Sass5|£& 





图 1-2 Compass 工 作 流 


1.3.1 Compass 库 

Compass 肯 身 包含 了 很 多 由 Sass 混 合 融 和 函数 构成 的 模块 ,所 有 的 这 些 模块 在 Compass 的 官网 
上 都 有 详细 的 说 明和 示例 。 这些 库 会 帮助 你 解决 跨 浏 览 旭 兼容 问题 ,以 及 提供 给 你 很 多 已 经 被 证 
明 过 的 优秀 设计 模式 ， 比 如 说 重 置 、 网 格 布局 、 列 表 样 式 、 表 格 辅助 项 和 和 圣 埋 韵律 等 。Compass 
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同时 提供 了 CSS3 的 帮助 函数 ， 大 你 填充 厂商 前 绥 、 抽 离 不 同 浏 览 郑 在 实现 同一 CSS3 属 性 时 的 不 
同 ， 并 让 你 写 起 CSS3 属 性 来 更 得 心 应 手 。 

Compass 能 非常 灵巧 地 完成 一 些 任 务 ， 比 如 说 直接 从 文件 系统 该 取 你 的 图 片 然后 输出 对 应 的 
样式 到 你 的 CSS 中 。 资 源 URL 辅 助 消 数 让 你 能 够 轻松 地 切换 到 使 用 CDN 网 络 进行 项 目 部 团 ， 而 无 
需 重 写 你 的 样式 引用 。Compass 其 至 能 目 动 帮 你 把 同一 日 录 的 图 片 合成 精灵 图 ， 带 你 计算 好 单个 
图 厂 的 引用 位 置 并 目 动 输出 到 CSS 文 件 中 。 

以 上 的 任务 你 都 可 以 通过 目 己 的 方式 完成 ， 但 是 经 由 设计 社区 验证 的 Compass 方 案 能 让 你 在 
更 短 的 时 间 内 完成 更 多 的 任务 。 

Compass 的 核心 样式 框架 并 不 能 让 你 的 网 站 更 美 。 实 际 上 ， 所 有 的 核心 框 染 的 特性 都 是 独立 
于 设计 的 ,以 便 你 能 在 任何 风格 的 网 站 设计 中 使 用 。 像 所 有 的 流行 事物 一 样 ， 网 站 的 设计 美学 也 
在 不 断 地 过 时 和 更 新 。 所 以 提供 精心 设计 的 网 站 这 个 任务 就 留 给 Compass 社 区 的 前 端 开发 人 员 
和 设计 人 员 ， 通 过 使 用 Compass 的 插件 来 实现 。 


1.3.2 ”简单 的 Compass 样 式 项 目 


Sass 和 Compass 都 是 用 Ruby 写 的 且 起 源 于 Ruby on Rails 社 区 , 但 是 Compass 提 供 了 工具 和 配置 
项 ， 使 在 不 基于 Ruby 的 项 目 中 编写 Sass 样 式 表 也 非常 简单 。 无 论 你 只 是 简单 地 写 个 html 文 件 ， 还 
是 把 Sass 和 集成 到 大 型 框架 (比如 Django、Dral 或 者 .NET )，Compass 都 能 胜任 。 

Compass 明 白 你 不 单单 是 在 写 样 式 ， 你 是 在 构建 设计 。 正 因为 如 此 ，Compass 需 要 知道 你 在 
哪里 存放 图 片 、 字 体 和 JavaScript 文 件 ， 以 便 轻 松 管理 并 在 样式 中 引用 这 些 文件 。 举 例 来 说 ， 
Compass 会 自动 帮 你 构建 精灵 图 ， 并 在 CSS 中 正确 引用 它们 ; 假如 你 通过 image-url () 辅 助 硕 引 
用 了 一 个 并 不 存在 的 图 片 ，Compass 会 告警 ; Compass 可 以 在 你 的 CSS 中 内 瞬 必 要 的 网 片 和 字体 ， 
免 去 浏览 套 的 一 些 工 作 。 


















































Y |." sample, project 
œ config.rb 
v | l images 
三 | grid.png 
Y |. javascripts 
三 application.js 
了 | ! sass 
£j je.scss 
Y |. partials 
£j base.scss 
££) print.scss 
£|screen.scss 
YI stylesheets 
v |. fonts 
= my font.ttf 
£&|je.css 
£j print.css 
| screen.css 











图 1-3 一 个 标准 的 Compass 项 目 
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1.3.3 社区 生态 系统 


如 果 你 有 多 年 的 Web 开 发 经 验 , 一 定 忘 不 了 JavaScript 框 架 诞 和 后 之 前 的 黑暗 日 子 。 那 真是 一 个 
可 怕 的 时 期 一 一 DOM 上 一 个 最 小 的 诡异 问题 都 要 耗费 你 几 个 小 时 去 排查 。 而 现 如 今 ，JavaScript 
框架 帮 你 解 次 了 浏览 融 之 间 不 一 致 的 问题 ,并 形成 了 一 套 基 础 的 封装， 让 你 的 代码 可 以 轻松 移植 
到 别人 的 项 目 上 。 多 亏 了 Web 开 发 社区 溯 否 努力 的 付出 ,现在 用 JavaScript 开 发 简直 就 是 一 种 享受 。 

作为 Sass 的 一 个 框架 ，Compass 致 力 于 为 开发 者 和 设计 人 员 提 供 一 个 基础 架构 ， 从 而 分 享 他 
们 的 库 和 框 如 ,为 大 家 参与 开源 样式 开发 推力 助 航 。 以 前 ， 分 享 一 段 CSS 代 但 必须 在 博客 文章 中 内 舰 
一 段 代码 和 示例 文件 ， 这 样 的 日 子 正 快速 逝去 ， 那 种 策略 还 有 一 个 很 大 的 兹 并 就 是 ， 随 着 时 间 的 流 
逝 ， 这 段 代 码 的 作者 很 难 再 去 解决 bug 或 者 增加 新 的 功能 。 而 有 了 Compass， 样 式 库 可 以 像 其 他 软件 
一 样 分 发 ， 这 就 意味 着 修复 bug 或 者 洪 加 对 最 新 浏览 问 的 文 持 无 非 就 是 升级 和 重新 编译 你 的 样式 表 。 

很 多 社区 成 员 会 把 他 们 的 很 多 代码 提炼 打包 到 Compass 中 封装 ， 然 后 供 其 他 人 直接 使 用 ， 避 
倪 其 他 人 在 写 静 人 态 CSS 代 人 码 时 还 得 重新 编写 复杂 散 侠 的 代码 (第 10 草 会 介绍 如 何 编写 你 目 己 的 
Compass 组 件 )。 啊 应 式 布局 、 上 段落 比例 、 目 定义 动画 、 精 美的 按钮 、 图 片 元 杂 集 ， 以 及 色 板 都 可 
以 通过 Sass 来 编写 , 然后 扩展 到 Compass 中 。 利 用 Compass 扩 展 ， 就 无 需 构建 无 聊 的 基础 代码 ， 从 
而 把 更 多 的 精力 用 于 实现 网 站 的 独特 功能 。 在 你 从 Sass 初 学 者 问 专 家 过 渡 的 过 程 中 ， 如 采 你 一 如 
既往 地 认可 和 感谢 Sass、Compass 和 社区 所 做 的 工作 ， 那 么 作为 回报 ， 你 可 以 把 你 的 芋 兰 工作 成 
果 分 至 给 其 他 人 。 
































1.4 ”创建 一 个 Compass m E 


如 果 你 还 没有 安装 Compass， 可 以 参考 附录 人 A 的 指引 进行 安装 。 安 装 好 以 后 ， 第 一 件 事 就 是 
创建 一 个 Compass 项 目 。 

同 其 他 优秀 的 命令 行 接口 工具 (CLU) 一 样 ，Compass 提 供 了 非常 丰 宣 的 帮助 信息 来 帮 我 们 
了 解 Compass 的 各 项 功能 。 测 试 一 下 Compass 是 否 安 闭 成 功 。 打 开 命 令 行 进入 一 个 新 的 样式 项 目 
目录 ， 运 行 compass help。 如 果 成 功 打印 出 了 帮助 信息 和 命令 行 参数 信息 ， 说 明 Compass 安 闭 
好 了 。 如 有 果 没 有 的 话 ， 请 重新 按照 附录 A 的 指引 进行 安 北 ， 然 后 重新 尝试 。 

下 面 从 创建 一 个 新 的 Compass 项 目 开始 ， 新 项 目 包 含 了 一 个 配置 文件 和 Sass 源 文件 、CSS 输 
出 文件 等 。 将 该 文件 命名 为 samaple。 


compass create sample 





新 目录 下 会 生成 这 么 几 个 文件 : 

total 8 

drwxr-xr-x 6 wynn staff 204 Jan 3 12:11 

drwxr-xr-x 3 wynn staff 102 Jan 3 12:12 .. 
drwxr-xr-x 4 wynn staff 136 Jan 3 12:11 .Sass-cache 
-rw-r--r-- 1 wynn staff 315 Jan 3 12:11 config.rb 
drwxr-xr-x 5 wynn staff 170 Jan 3 12:11 Sass 
drwxr-xr-x 5 wynn staff 170 Jan 3 12:11 stylesheets 
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使 用 默认 配置 ，Compass 已 经 帮 我 们 默认 生成 了 一 个 config .rb 配置 文件 ， 一 个 名 为 sass 
的 目录 , 里 边 存 放 Sass 的 源 文 件 , 一 个 名 为 styLlesheets 的 目录 , 里 边 存放 Sass 编 译 后 生成 的 CSS 
文件 。 如 果 你 想 了 解 config .rp 里 边 的 所 有 配置 项 ,请 参考 附录 B。 现 在 我 们 将 使 用 默认 配置 来 
演示 如 何 用 Compass 解 决 实 际 工作 中 过 到 的 CSS 问 题 。 


1.5 ”使 用 Compass 解决 真实 的 CSS 问题 


你 已 经 知道 了 如 何 使 用 Compass 创 建 一 个 基本 的 项 目 ， 接 下 来 我 们 看 看 如 何 使 用 Compass 应 
对 我 们 几乎 每 天 都 面 对 的 样式 挑战 。 接 下 来 的 几 小 节 将 通过 使 用 Compass 的 内 置 模块 (Sassh9 pK 
数 和 其 他 的 特性 组 合 而 成 ) 来 实现 CSS 重 置 、 网 格 布局 、 表 格格 式 化 和 CSS3 的 一 些 特性 。 


1.5.1 通过 重 置 来 保持 样式 表现 一 致 


通过 Eric Meyer 和 其 他 的 一 些 倡议 者 的 努力 ， 在 开始 创建 样式 之 前 添加 一 个 重 置 文件 已 经 变 
得 非常 普及 。 如 果 你 曾经 使 用 过 CSS 网 格 布局 框架 , 里 边 就 包含 了 CSS 重 置 ， 只 是 你 不 知道 而 已 。 
CSS 重 置 无 非 就 是 把 浏览 器 对 于 各 种 元 素 添 加 的 CSS 属 性 去 掉 ， 给 开发 者 提供 一 个 完全 无 干扰 的 
开始 来 添加 你 想 要 的 样式 。 

Eric 的 经 典 重 置 样式 如 代码 清单 1-13 所 示 。 


代码 清单 1-13 经典 CSS 重 置 


/* v1.0 | 20080212 */ 


























html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline; 
background: transparent; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 


} 
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blockquote, q ( 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: 773 
content: none; 


} 


/* 不 要 忘 了 定义 focus 样 式 ! */ 
:focus { 
outline: O0; 


} 


/* 记得 通过 其 他 修饰 方式 来 突出 新 插入 内 容 ! */ 
ins ( 
text-decoration: none; 
} 
del { 
text-decoration: line-through; 


} 


/* 同时 需要 在 表格 元 素 标 签 上 添加 'cellspacing="0"' */ 
table { 

border-collapse: collapse; 

border-spacing: 0; 


) 

你 或 许 已 经 注意 到 Compass 项 目 默认 生成 的 Screen.css 文 件 了 了 ， 这 个 文件 就 是 基于 Erics 的 reset 
脚本 衍生 出 来 的 。 只 要 通过 以 下 代码 添加 它 ， 就 可 以 让 你 的 样式 在 各 个 浏览 器 里 边 起 点 一 致 : 

QGimport "compass/reset" 

就 这 一 条 命令 , 其 实干 了 很 多 事情 , 我们 一 条 一 条 来 说 ,你 通过 使 用 Sass 的 引入 命令 @import 
引入 Compass 的 重 置 模块 。 一 个 模块 就 是 Compass 框 架 中 独立 的 一 部 分 ， 可 被 随意 引用 话 加 到 你 的 项 
目 中 。 通 过 加 入 这 行 代 码 ， 你 生成 的 CSS 文 件 中 就 会 包含 CSS 重 置 部 分 代码 ， 如 代码 清单 1-14 所 示 。 


代码 清单 1-14 通过 引入 CSS 重 置 生成 的 文件 


html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre; 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 











small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-weight: inherit; 
font-style: inherit; 
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font-size: 100%; 
font-family: inherit; 
vertical-align: baseline; 


body { 
line-height: 1; 
colors black; 
background: white; 


ol, ul { 
list-style: none; 


table { 
border-collapse: separate; 
border-spacing: 0; 
vertical-align: middle; 


caption, th, td ( 
text-align: left; 
font-weight: normal; 
vertical-align: middle; 


q, blockquote { 
quotes: "n " "n TI : 


} 
q:before, gratter, blockquote:before, blockquote:after | 
content: "93 


a img { 
border: none; 


) 

大 多 数 Compass 模 块 并 不 会 无 故 在 你 的 样式 表 中 添加 样式 ， 不 要 让 CSS 重 置 模 块 误导 了 你 ， 
Compass 重 置 模 块 位 于 样式 表 的 前 边 ， 只 要 被 引入 就 会 执行 gslobal-reset 这 一 混合 器 。 这 个 混 
合 器 的 写法 如 代码 清单 1-15 所 示 。 


代码 清单 1-15 CSS globalL-reset 混 合 需 





Qmixin global-reset { 
html, body, div, span, applet, object, iframe, 
hl, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
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Ginclude reset-box-model; 
QGinclude reset-font; } 


body { 

Qinclude reset-body; } 
ol, ul ( 

Qinclude reset-list-style; } 
table ( 


Qinclude reset-table; } 
caption, th, td 1 
Qinclude reset-table-cell; } 
q, blockquote ( 
Qinclude reset-quotation; ) 
a img { 
Qinclude reset-image-anchor-border; ) } 


这 里 我 们 注意 到 Compass 使 用 了 之 前 提 到 过 的 Sass 的 emixin 混 合 右 和 eincluaqe 包 含 特性 来 
构建 reset 模 块 。 在 global-reset 之 外 ， reset 醒 块 还 提供 了 一 系列 有 特定 用 途 的 重 置 混合 需 ， 其 
中 有 一 个 是 专 为 HTMLS 元 素 服务 的 。 通 过 在 你 的 Sass 文 件 中 添加 aincludqe reset-htm15 命 令 ， 
输出 文件 中 会 生成 额外 的 CSS 规 则 来 对 HTML5 的 元 素 进 行 基本 的 样式 修改 ， 如 代码 清单 1-16 
Pis 


代码 清单 1-16 使 用 了 HTML5 重 置 模块 的 输出 代码 


article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
display: block; 
} 
如 果 你 想 了 解 更 多 的 Compass 模 块 ， 请 访问 Compass 官 网 查看 在 线 文档 。 现 在 你 已 经 熟练 掌 


握 了 重 置 模块 ， 接 下 来 我 们 看 看 如 何 使 用 Compass 的 网 格 布 局 框 染 来 更 加 高 效 地 编写 CSS。 


1.5.2 不 用 计算 创建 布局 


这 几 年 CSS 的 主要 趋势 就 是 越 来 越 流行 网 格 框架 ， 比 如 说 Blueprint 和 960 网 格 系统 ( 如 图 1-4 
所 示 )。 网 格 布 局 黄 定 了 好 的 平面 设计 的 基础 ， 在 这 些 年 发 展 的 愈 发 成 熟 。 你 只 需 在 布局 中 选择 
特定 数量 的 列 ， 每 列 之 间 的 内 容 目 然 会 被 统一 地 间 隐 隔 开 。 
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Twitter 


J CNATHANSMITH 


Download - Templates: Acom, Fireworks, Flash, 
InDesign, GIMP, Inkscape, lllustrator, OmniGraffle, 
Photoshop, Visio, Exp Design. Also: PDF sketch 
sheets + CSS files. Repository at GitHub. 


CUSTOM CSS GENERATOR 


Essence 


The 960 Grid System is an effort to streamline web 
development workflow by providing commonly 
used dimensions, based on a width of 960 pixels. 
There are two variants: 12 and 16 columns, which 
can be used separately or in tandem. Read more. 


More Columns 


For those more comfortable designing on a 24-column grid, an alternative 
version is also included. It consists of columns 30 pixels wide, with 10 pixel 
gutters, and a 5 pixel buffer on each side of the container. This keeps text 
from touching browser chrome — helpful for devices like the iPhone, where a 
lower-case "i" or "|" might be easily missed. View demo. 


Keynote Wireframe Toolkit — 12 col 


Wireframe Toolkit 


[ Modia FAQ Tips 


HTML LAYOUT GENERATOR 


Dimensions 


The 12-column grid is divided into portions that are 
60 pixels wide. The 16-column grid consists of 40 
pixel increments. Each column has 10 pixels of 
margin on the left and right, which create 20 pixel 
wide gutters between columns. View demo. 


Source Order 


SHOW GRID 


Formalize CSS — 12 col 


$12 


If you are aren't using it, 
you're wasting time. 


textexpander 
GRID OVERLAY BOOKMARK 


Purpose 


The premise of the system is ideally suited to 
rapid prototyping, but it would work equally well 
when integrated into a production environment. 
There are printable sketch sheets, design layouts, 
and a CSS file that have identical measurements. 


By utilizing the push_XX and pull_XX classes, elements can be rearranged, 
independent of the order in which they appear in the markup. This allows you 
to keep more pertinent info higher in the HTML, without sacrificing precision in 
your page layout. For instance, view the source code of this page to see how 
the H1 tag has been re-positioned. 


SHOW GRID 


formali 
TEACH YOUR FORMS SOME MANNIRS 


WERE 
HIRING > 





图 1-4 ”960px 宽 的 网 格 系统 布局 


一 般 来 讲 ， 有 了 网 格 布 局 框架 ， 在 写 一 个 优良 的 列 式 布局 时 就 无 需 进行 计算 。 框 架 通 过 CSS 
规则 帮 你 设置 好 容 融 元 素 的 宽 以 及 在 容 表 内 的 每 个 子 列 的 蜗 。 让 我 们 看 一 下 Blueprint 框 避 里 边 的 
脚本 是 如 何 写 的 ， 如 代码 清单 1-17 所 示 。 
代码 清单 1-17 Blueprint 网 格 布 局 

.Container { 


width: 950px; 
margin: 0 auto; 








/* 建立 基本 的 格式 浮动 和 外 间距 . */ 


.Column, .span-1, .span-2, .span-3, .span-4, .span-5, 
.Span-6, .span-7, .span-8, .span-9, .span-10, .span-11, 
.Span-12, .span-13, .span-14, .span-15, .span-16, 
.Span-17, .span-18, .span-19, .span-20, .span-21, 
.Span-22, .span-23, .span-24 { 
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float: left; 
margin-right: 


} 





10px; 
/* 一 行 中 的 最 后 一 列 需要 添加 这 个 类 修饰 . */ 
.last ( margin-right: 0; ) 


/* 通过 使 用 下 边 这 些 类 来 设 定 列 宽 . */ 


.Span-1 


.Span-2 
.Span-3 
.Span-4 
.Span-5 
.Span-6 
. Span-7 
.Span-8 
.Span-9 
.Span-10 
.Span-11 
.Span-12 
.Span-13 
.Span-14 
.Span-15 
.Span-16 
.Span-17 
.Span-18 
.Span-19 
.Span-20 
.Span-21 
.Span-22 
.Span-23 
.Span-24 


使 用 以 上 这 些 CSS 规 则 , MERRIA ER container, HER 


(width: 


(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 


(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 
(width: 


30px; } 


70px;j 
110px; 
150px; 
190px; 
230px; 
270px; 
310px; 
350px; 


w w w wu 


390px; 
430px; 
470px; 
510px; 
550px; 
590px; 
630px; 
670px; 
710px; 
750px; 
790px; 
830px; 
870px; 
910px; 


950px; 


w w w w ww m 


margin-right:0;} 





WEEER ANA 





子 元 素 上 添加 span-xx 类 ， 就 可 以 创建 出 一 个 16 列 的 布局 。 通 过 这 样 的 方式 进行 布局 ， 你 能 够 快 
速 地 构建 出 原型 ， 且 不 用 记 住 在 30 和 950 之 间 的 40 的 倍数 。 

那么 Compass 做 了 哪些 事情 来 优化 提升 CSS 网 格 布 局 呢 ? H Compass AEA Aè 
了 对 网 格 框架 样式 的 文 持 , 这 样 做 的 好 处 是 按 需 使 用 , 避免 你 的 HTML 标 签 
其 次 ， 也 是 最 重要 的 ，Compass 对 网 格 布局 的 支持 方式 即 是 对 其 他 框 染 的 方式 改进 
董 详细 介绍 。 

我 们 通 在 命 


compass create my grid --using blueprint 


就 像 在 1.4 方 里 边 那 样 ， 你 会 在 my grid 目 录 下 找到 一 个 全 新 的 Compass 工 程 ， 只 是 这 次 
screen.Scss 文 件 的 内 容 更 多 。 这 个 文件 有 着 详细 的 注释 ， 且 在 一 系列 基本 布局 的 样式 里 边 ， 你 可 
以 看 到 有 一 个 Blueprint 模 块 快 速 的 总 览 。 首 先 映 入 腿 寡 的 惑 民 是 列 式 布 局 相关 的 样式 被 归 类 成 了 





佑 的 形式 提供 
需要 添加 额外 的 类 名 。 
， 这 将 在 第 4 

















过 Blueprint 创 建 一 个 Compass 工 程 ， 令 行 中 运行 下 面 的 命令 








JU Vo 


混合 类 ， 所 以 不 是 在 HTML 标 签 上 添加 一 个 span-8 的 类 名 ， 而 是 使 用 Sass 的 column 混 合 妖 
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einclude column ($sidebar-columns) ; 

还 要 注意 $siaqebar-colums 变 量 。 多 亏 了 Sass， 你 现在 可 以 通过 变量 来 控制 你 的 布局 ， 多 
么 强大 啊 。 仪 仅 修 改 几 个 Sass 文 件 顶 部 的 变量 ,就 可 以 快速 地 构建 不 同 列 、 不 同 列 间 隔 和 不 同 边 
栏 大 小 的 原型 。 如 采 想 在 传统 的 CSS 网 格 框 架 中 做 这 件 事情 ， 你 只 能 目 己 去 计算 这 些 东 西 ， 然 后 
在 你 的 HTML 标 签 上 修改 类 名 。 

这 里 我 们 就 不 展开 Blueprint 网 格 布局 了 ， 留 竺 第 6 章 直 接 使 用 。 接 下 来 ， 通 过 构建 真实 的 
Compass 项 上 日 来 进一步 了 解 Compass 的 表格 辅助 可 


1.5.3 ”通过 表格 辅助 器 为 表格 添加 更 专业 的 斑马 条 纹样 式 


继续 我 们 对 Compass 特 性 的 探索 ， 来 看 看 它 的 表格 辅助 保 。 表 格 辅助 右 由 一 系列 Sass 混 合 此 
构成 ， 它 使 表格 样式 编写 更 轻松 容易 ， 如 代码 清单 1-18 所 示 。 
代码 清单 1-18 Compass 表 格 辅助 器 


Qimport "compass/reset" 
Qimport "compass/utilities/tables"; 











table ( 
S$table-color: #666; 
Qinclude table-scaffolding; 
Qinclude inner-table-borders(1px, darken(S$table-color, 402)); 
Qinclude outer-table-borders (2px); 
Qinclude alternating-rows-and-columns(Stable-color, 
adjust-hue(S$table-color, -120deg), 4222222); } 


T I—4412E8. Boolileimports AKTE, PEMA F4 I LLABE HIR Gr d o 
table-scaffolding 混 合 类 提供 了 最 基本 的 样式 修饰 ， 用 于 已 肥 过 CSS 重 置 处 理 的 th 和 tdq 元 
系 , 其 中 包括 我 们 背 用 的 一 些 修饰 , 比如 说 数字 列 会 有 一 个 右 对 齐 。 我 们 看 看 这 个 混合 需 的 源码 ， 
如 代码 清单 1-19 所 示 。 


代码 清单 1-19 ”表格 辅助 硕 中 的 混合 天 


Qmixin table-scaffolding { 

th 1 
text-align: center; 
font-weight: bold; ) 

td, 

th 4 
padding: 2px; 
&.numeric { 

text-align: right; ) ) } 


inner-table- borders 和 outer-table-bordqers 混 合 器 正如 其 名 , 用 于 给 表格 以 及 表格 


内 的 单元 格 添加 边框 。 
最 后 ， alternating-rows-and- columns]lH t£ f&jeBk f —R E fl JZI XX, 来 给 你 的 


HTML 表 格 添加 斑马 条 纹样 式 。 你 或 许 会 问 为 什么 不 用 :nth-chi1ld、:even 或 者 :oaqdq 等 CSS 伪 
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类 选择 器 呢 ? 这 是 个 好 问题 。 其 实 ， 在 底层 Compass 就 是 通过 这 种 方式 实现 的 。 但 是 这 个 混合 器 
除了 样式 上 颜色 的 交错 等 修饰 还 会 提供 一 些 基 于 类 名 的 脚本 支持 。 我们 看 一 下 它 的 源码 ， 如 代码 
清单 1-20 所 示 。 


代码 清单 1-20 ”按照 行 或 列 更 改 颜色 的 混合 天 


Qmixin alternating-rows-and-columns( 
Seven-row-color, 
Sodd-row-color, 
S$dark-intersection, 
Sheader-color: white, 
S$footer-color: white) ( 





th ( 
background-color: S$header-color; 
&.even, &:nth-child(2n) ( 
background-color: S$header-color - $dark-intersection; ) 
} 
tr.odd { 
td { 
background-color: Sodd-row-color; 
&.even, &:nth-child(2n) { 
background-color: $odd-row-color - $dark-intersection; } 
} 
} 
tr.even { 
td { 
background-color: $even-row-color; 
&.even, &:nth-child(2n) ( 


background-color: S$even-row-color - S$dark-intersection; j 
} 
} 
tfoot { 
th, td { 


background-color: Sfooter-color; 
&.even, &:nth-child(2n) { 
background-color: S$footer-color - $dark-intersection; ) 


} 
} 


注意 ,， 闫 色 值 不 仪 仪 是 一 个 变量 ,它们 之 间 还 会 用 来 进行 一 些 计算 ,以 便 提 供 合 适 的 对 比 来 
保证 网 页 的 可 读 性 。 下 一 章 你 将 学 到 更 多 关于 Sass 处 理 变量 和 计算 的 知识 。 我 们 继续 往 下 看 ， 了 
解 Compass 是 如 何 实 现在 写 CSS 时 无 需 再 写 厂 和 阐 前 级 的 。 

















1.5.4 CSS3 属性 无 需 再 写 厂 商 前 绥 


当 CSS3 的 新 属性 被 越 来 越 多 的 浏览 可 新 版 本 所 采纳 时 ， 设 计 师 们 兴奋 极 了 ， 因 为 他 们 可 以 
用 新 的 CSS 属 性 实现 以 前 需要 非 第 感 苇 的 样式 技巧 才能 实现 的 任务 。 令 人 异 肖 激 动 的 是 ， 现 在 用 
几 行 非 沼 人 简 单 的 CSS 丈 能 实现 边框 豆角 ， 且 不 用 在 音 随 之 而 来 的 厂商 前 级 。 厂 商 前 级 束 是 浏览 用 
在 CSS 特 性 前 加 的 -webkit 和 -moz 等 前 缀 ， 用 于 对 试验 中 的 CSS 特 性 进行 文 持 。 举 个 最 简单 的 例 
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子 ， 要 给 一 个 <aiv> 元 素 设 置 5px 的 边框 圆 角 ， 你 必须 要 这 么 写 CSS: 


.rounded { 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
} 
一 般 来 说 , 使 用 Compass 的 CSS3 模 块 中 的 边框 圆 角 混合 器 可 以 免 去 你 这 部 分 的 重复 工作 。 首 
先 在 你 的 Sass 文 件 中 引入 CSS3 模 块 ， 然 后 引入 混合 器 : 


Qimport "compass/css3"; 
.rounded ( 
Qinclude border-radius (5px); 





) 
看 一 下 生成 的 CSS: 


.rounded { 
-moz-border-radius: 5pX; 
-webkit-border-radius: 5px; 
-o-border-radius: 5px; 
-ms-border-radius: 5px; 
border-radius: 5px; 


} 

这 样 做 ,不仅 避免 7 重复 输入 -webkit 和 -moz， 同 时 也 支持 了 其 他 的 一 般 和 常用 的 厂商 命名 
空间 , 令 你 设计 的 网 页 可 以 在 更 多 浏览 带 中 保持 良好 设计 。 尽管 这 一 点 点 重复 看 上 去 并 不 是 那么 
恐怖 ,可 如 果 你 仅仅 是 想 让 第 四 个 角 是 圆 角 呢 ? 对 此 ,火狐 浏览 器 的 开发 者 们 并 未 就 最 好 的 实现 
方式 与 业界 其 他 人 士 达 成 一 致 ， 而 惯用 的 实现 方式 如 下 : 

















.rounded-one í( 
-moz-border-radius-topleft: 5px; 
-webkit-border-top-left-radius: 5px; 

j 


这 个 地 方 ， Compass 有 更 好 的 实现 。 你 可 以 通过 borqer-corner-zradius 混 合 需 来 指定 单个 
边框 圆 角 : 


.rounded-one { 
Qinclude border-corner-radius(top, left, 5px); 


生成 的 CSS 如 下 ， 火 狐 的 方式 也 包含 在 内 : 


.rounded-one í( 
-moz-border-radius-topleft: 5px; 
-webkit-border-top-left-radius: 5px; 
-o-border-top-left-radius: 5px; 
-ms-border-top-left-radius: 5px; 
border-top-left-radius: 5px; 

} 


以 上 只 是 Compass 中 有 关 CSS3 的 冰山 一 角 的 一 角 的 一 角 。 第 9 章 将 更 深入 地 接触 所 有 能 节省 
时 间 的 特性 。 
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1.6 小结 





在 这 第 1 草 ， 我 们 学 习 了 CSS 预 处 理 的 示例 ， 并 简单 介绍 了 一 下 Sass 的 4 个 关键 特性 : 变量 
选择 需 胡 套 、 混 合 占 和 选择 融 继 承 。 同 时 ， 我 们 也 了 解 了 一 些 Compass 框 架 中 Sass 特 性 在 真实 世 
界 程序 中 的 应 用 ， 包 括 CSS 重 置 、 格 式 布局 、 表 格 样式 修饰 以 及 CSS3 边 框 圆 角 。 

下 一 章 将 进一步 学 习 S$ass 的 声 法 , 包括 颜色 函数 和 脚本 文 持 。 当 你 对 $ass 掌 握 得 更 好 一 些 时 ， 
我 们 将 更 深入 地 学 习 Compass。 








Sass 基 础 语法 





本 章 内 容 

Q 通过 变量 重用 颜色 、 长 度 以 及 其 他 一 些 值 
口 通过 规则 般 侠 让 CSS 更 加 结构 化 

口 通过 多 文件 组 织 让 样式 变 得 更 加 可 维护 
口 通 过 混合 策 和 继承 重用 整个 样式 





Sass 的 SCSS 语 法 是 CSS3 语 法 的 一 个 超 集 。 这 就 意味 者 如 果 你 会 读 写 CSS， 就 已 经 知道 了 如 
何 读 写 基本 的 Sass。 

在 CSS 的 基础 之 上 ，Sass 添 加 了 新 特性 和 新 语法 ， 让 你 能 够 用 更 少量 的 代码 更 加 清楚 地 表示 
更 多 的 样式 。 添 加 某 些 Sass 特 性 是 为 了 让 那些 已 掌握 CSS 但 可 能 从 未 接触 过 Sass 的 人 ， 能 轻松 地 
理解 样式 。 当 然 ， 大 多 数 人 还 需 给 予 一 些 指导 ， 这 即 是 本 童 的 目的 。 

第 一 次 该 Sass 文 件 时 ， 你 一 开始 会 只 看 你 熟悉 的 部 分 : CSS。 所 有 Sass 文 件 的 根本 目标 都 是 
要 像 CSS 那 样 设 计 网 站 的 样式 ， 所 以 样式 定义 始终 是 这 个 文件 中 最 重要 的 部 分 。 

只 要 你 理解 了 样式 部 分 ， 你 就 可 以 看 其 中 用 到 的 Sass 特 性 了 。 如 果 有 不 明白 的 地 方 ， 可 以 在 
本 书 中 找到 相关 解释 。 看 的 同时 ， 要 和 稍 问 目 己 ， 这 样 做 对 表示 样式 有 什么 帮助 ? 

写 Sass 与 读 Sass 很 相似 , 你 就 当 自 己 是 在 写 CSS。 然 后 你 考虑 哪些 Sass 特 性 用 进来 可 以 优化 你 
写 的 CSS。 你 是 否 在 很 多 地 方 用 了 同一 种 颜色 (或 稍 有 差异 的 颜色 ) ? 你 的 选择 需 是 否 都 以 同一 
ID 作为 父 选 择 需 ? 类 似 这 样 的 问题 ，Sass 能 帮 你 优化 。 

第 1] 草 简单 地 过 了 一 下 Sass 的 主要 特性 。 本 和 草 将 更 加 次 入 、 详 细 地 介绍 这 些 特 性 。 我 们 首先 
谈 一 谈 变 量 一 一 Sass 中 最 简单 、 最 基本 的 重用 形式 。 然 后 ， 介 绍 如 何 通 过 选择 需 舱 套 来 保持 样式 
的 整洁 和 易 谈 性 。 接 着 ,介绍 如 何 把 大 卢 的 样式 分 拆 到 不 同 的 文件 ， 然 后 通过 组 织 文 件 的 形式 保 
持 可 维护 性 。 与 此 同时 再 穿插 讲 一 下 未 提 到 的 注释 , 它 在 我 们 的 代码 文件 中 且 对 外 不 可 见 。 最 后 ， 
我 们 将 学 习 两 种 重用 大 段 样 式 的 方法 : 混合 器 和 继承 。 前 者 让 一 遍 遍 重用 同一 类 型 的 样式 变 得 非 
各 简单 ， 而 后 者 用 于 表达 类 之 间 的 关系 。 

首先 讨论 变量 ， 它 是 Sass 中 最 基本 的 重用 形式 。 
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2.1 使 用 变量 


Sass 让 人 们 受益 的 一 个 重要 特性 就 是 它 为 CSS 引 入 了 变量 。 你 可 以 把 反复 使 用 的 CSS 属 性 值 
定义 成 变量 ， 然 后 通过 变量 名 来 引用 它们 ， 而 无 需 重复 书写 这 一 属性 值 。 或 者 ， 对 于 仅 使 用 过 一 
次 的 属性 什 ， 你 可 以 赋 子 其 一 个 易 公 的 变量 名 ， 让 人 一 眼 就 知 适 这 个 属性 信 的 用 途 。 

Sass 使 用 s 符 号 来 标识 变量 ， 比 如 shighnlight-color 和 $sidebar-width。 为 什么 选择 ss 
符号 呢 ?” 因 为 它 好 认 、 更 具 美 感 ", 日 在 CSS 中 并 无 他 用 , 不 会 导致 与 现存 或 未 来 的 CSS 语 法 冲突 。 

变量 的 最 基本 方面 就 是 一 开始 的 变量 声明 ， 即 我 们 接 下 来 要 讨论 的 内 容 。 


























2.1.1 变量 声明 


Sass 变 量 的 声明 跟 CSS 属 性 的 声明 很 像 : 

Shighlight-color: #abcdef; 

这 意味 着 变量 $shighlight-color 现 在 的 值 是 #4apbcdef。 任何 可 以 用 作 CSS 属 性 值 的 赋值 都 
可 以 用 作 Sass 的 变量 值 ， 甚 至 是 以 空格 分 割 的 多 个 属性 值 ， 如 sbasic-border: lpx solid 
black;, 或 以 逗号 分 割 的 多 个 属性 值 ， 如 splain-font: "Myriad Pro",Myriad,"Helvetica 











Neue", Helvetica, "Liberation Sans", Arialfllsans-serif; sans-serif;。 这 时 变 
ROYBSUHEXX. ERAETRSIHIECT AER —ÀXAL HR DUE: Y f 8I H 

与 CSS 属 性 不 同 ， 变 量 可 以 在 CSS 规 则 块 定 义 之 外 存在 。 当 变量 定义 在 CSS 规 则 块 内 ， 那 么 
该 变量 只 能 在 此 规则 块 (或 其 子 级 规则 块 ; 见 2.2 节 ) 内 使 用 。 如 果 它 们 出 现在 任何 形式 的 {...} 
Hh (如 amedqia 或 者 efont-face 块 )， 情况 也 是 如 此 : 


$nav-color: tdtabcdef; 





nav ( 
Swidth: 100px; 
width: S$width; 
color: S$nav-color; 


j 

在 这 段 代码 中 ，$nav-color 这 个 变量 定义 在 了 规则 块 外 边 ， 所 以 在 这 个 样式 表 中 都 可 以 像 
nav 规 则 块 那样 引用 它 。swiath 这 个 变量 定义 在 了 nav 的 { } 规 则 块 内 ， 所 以 它 只 能 在 nav 规 则 块 
内 使 用 。 这 意味 着 是 你 可 以 在 样式 表 的 其 他 地 方 定义 和 使 用 $width 变 量 ,， 不 会 对 这 里 造成 影响 。 

只 声明 变量 其 实 没 啥 用处， 我 们 最 终 的 目的 还 是 使 用 它们 。 上 例 已 介绍 了 如 何 使 用 
snav-color 和 S$width 这 两 个 变量 ， 接 下 来 我 们 将 进一步 探讨 变量 的 使 用 方法 。 











2.1.2. 变量 引用 
凡是 CSS 属 性 的 标准 值 〈 比 如 说 1px 或 者 bold ) 可 存在 的 地 方 ， 变 量 就 可 以 使 用 。CSS 生 成 








D 老 版 本 的 Sass 使 用 ! 来 标识 变量 。 改 成 s 是 多 半 因 为 !'highlight-color 看 起 来 太 丑 了 。 
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时 ， 变 量 会 被 它们 的 值 所 蔡 代 。 之 后 ， 如 采 你 再 要 一 个 不 同 的 值 ， 只 需要 改变 这 个 变量 的 值 ， 则 
所 有 引用 此 变量 的 地 方 生 成 的 值 都 会 随 之 改变 。 


Shighlight-color: #abcdef; 





.Selected { 
border: 1px Shighlight-color solid; 
} 


看 上 边 示 例 中 的 Shi ghlight -color/ZPt ; 它 被 直接 赋值 给 border 属 性 j 当 这 段 代 人 码 被 编 
译 输出 CSS 时 ，s$highlight-color 会 被 #abcdef 这 一 颜色 值 所 替代 。 产 生 的 效果 就 是 给 
selectedq 这 个 类 一 条 1 像素 宽 、 实 心 且 颜 色 值 为 #abcaef 的 边框 。 

在 声明 变量 时 , 变量 信也 可 以 引用 其 他 变量 。 当 你 通过 粒度 区 分 , 为 不 同 的 全 取 不 同名 字 时 ， 
这 相当 有 用 。 下 例 在 独立 的 颜色 值 粒度 上 定义 了 一 个 变量 , 日 在 为 一 个 更 复 淋 的 边框 值 粒度 上 也 
定义 了 一 个 变量 : 

Shighlight-color: #abcdef; 

Shighlight-border: 1px S$highlight-color solid; 


























.Selected ( 
border: S$highlight-border; 
} 


这 里 ，shighlight-pborder 变 量 的 声明 中 使 用 了 shighlLlight-color 这 个 变量 。 产 生 的 效 
果 就 跟 你 直接 为 border 必 性 设置 了 一 个 1px $highlight-color solid 的 值 是 一 样 的 。 
最 后 ， 我 们 来 了 解 一 下 变量 命名 的 实用 技巧 ， 以 结束 关于 变量 的 介绍 。 


2.1.3 变量 名 用 中 划 线 还 是 下 划 线 分 隔 


Sass 的 变量 名 可 以 与 CSS 中 的 属性 名 和 选择 需 名 称 相 同 ， 包 括 中 划 线 和 下 划 线 。 这 完全 取决 
于 个 人 的 喜好 ， 有 些 人 喜欢 使 用 中 划 线 来 分 隔 变量 中 的 多 个 词 (如 Shighlight-color )， 而 有 
些 人 喜欢 使 用 下 划 线 〈 如 Shighlight_color )。 使 用 中 划 线 的 方式 更 为 普 志 ， 这 也 是 Compass 
和 本 书 都 用 的 方式 。 

不 过 ，Sass 并 不 想 强迫 任何 人 一 定 使 用 中 划 线 或 下 划 线 ， 所 以 这 两 种 用 法 相互 兼容 。 用 中 划 
线 声 明 的 变量 可 以 使 用 下 划 线 的 方式 引用 ， 反 之 亦 然 。 这 意味 着 即使 Compass 选 择 用 中 划 线 的 命 
名 方式 ， 这 并 不 影响 你 在 使 用 Compass 的 样式 中 用 下 划 线 的 命名 方式 进行 引用 : 


Slink-color: blue; 

















a 1 
color: $link color; 


) 

在 上 例 中 ，s$1link-color 和 $1link_color 其 实 指 癌 的 是 同一 个 变量 。 实 际 上 ， 在 Sass 的 大 
多 数 地 方 , 中 划 线 命名 的 内 容 和 下 划 线 命名 的 内 容 是 互通 的 , 除了 变量 , 也 包括 对 混合 胡 (参见 2.5 
节 ) 和 Sass 函 数 (参见 11.3 节 ) 的 命名 。 但 是 在 Sass 中 纯 CSS 部 分 不 互通 ， 比 如 类 名 、ID 或 属性 名 。 
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尽管 变量 自身 提供 了 很 多 有 用 的 地 方 , 但 是 Sass 基 于 变量 提供 的 更 为 强大 的 工具 才 是 我 们 关 
注 的 焦点 。 只 有 当 变 量 与 Sass 的 其 他 特性 一 起 使 用 时 ,才能 发 挥 其 全 部 的 潜能 。 接 下 来 ， 我 们 将 
探讨 其 中 一 个 非常 重要 的 特性 ， 即 规则 骸 侄 。 


2.2 #RE CSS 规则 


CSS 中 重复 写 选 择 禹 是 非常 恼人 的 。 如 果 要 写 一 大 串 指 癌 页 面 中 同一 块 的 样式 时 ,往往 需要 
一 遍 又 一 遍地 写 同 一 个 ID: 


#content article hi { color: #333 } 
#content article p { margin-bottom: 1.4em } 














#content aside { background-color: #eee } 

像 这 种 情况 ，Sass 可 以 让 你 只 写 一 过， 且 使 样式 可 该 性 更 局。 在 Sass 中 ， 你 可 以 像 俄罗斯 套 
娃 那 样 在 规则 块 中 骸 套 规则 块 。Sass 在 输出 CSS 时 会 帮 你 把 这 些 舱 套 规则 处 理 好 ， 避 人 免 你 的 重复 
que 


dicontent { 





article { 
hi { color: #333 } 
p { margin-bottom: 1.4em } 
} 
aside { background-color: #eee } 


} 

上 边 的 例子 ， Sass 会 在 输出 CSS 时 把 它 转 换 成 跟 你 之 前 看 到 的 一 样 的 效果 。 这 个 过 程 中 ,Sass 
用 了 两 步 ， 每 一 步 都 是 像 打 开 俄 罗斯 套 娃 那样 把 里 边 的 般 僚 规则 块 一 个 个 打开 。 首 先 ， 把 
#content (RA ) 这 个 id 放 到 article 选 择 磊 (FA) 和 aside 选 择 硕 (FA) 的 前 边 : 

#content article { 

h1 { color: #333 } 
p { margin-bottom: 1.4em } 

} 


#content aside { background-color: #eee } 
然后 ，#content article 里 边 还 有 瞬 套 的 规则 ，Sass 重 复 一 遍 上 边 的 步骤 ， 把 新 的 选择 带 
155 JI E A ER AEREA HU 321 : 


#content article hi { color: #333 } 
#content article p { margin-bottom: 1.4em } 





#content aside { background-color: #eee } 
一 个 给 定 的 规则 块 ， 既 可 以 像 普通 的 CSS 那 样 包含 属性 ， 又 可 以 般 套 其 他 规则 块 。 当 你 同时 
要 为 一 个 容 需 元 素 及 其 子 元 素 编写 特定 样式 时 ， 这 种 能 力 台 非常 有 用 了 。 


dcontent { 
background-color: #f£5f5f5; 








aside { background-color: #eee j 


| 
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容 侣 元 系 的 样式 规则 会 被 单独 抽 离 出 来 , 而 和 通 套 元 系 的 样式 规则 会 像 容 骨 元 系 没 有 包 合 任何 
属性 时 那样 被 抽 离 出 来 。 


#content { background-color: dfb5fb5f5 } 
#content aside { background-color: #eee } 


大 多 数 情 况 下 这 种 简单 的 航 套 都 没 问题 , 但 是 有 些 场景 下 不 行 ， 比 如 你 想 要 在 舱 套 的 选择 姨 
里 边 立 刻 应 用 一 个 类 似 于 : hover 的 伪 类 。 为 了 解决 这 种 以 及 其 他 情况 ，Sass 提 供 了 一 个 特殊 结 
爸 &。 











2.2.1 父 选 择 器 的 标识 符 & 


一 般 情 况 下 ，Sass 在 解 开 一 个 仍 套 规则 时 就 会 把 父 选 择 硕 〈#content ) 通过 一 个 空格 连接 
到 子 选 择 需 的 前 边 (articlefllaside ) 形成 (#content article 和 #content aside), iX 
种 在 CSS 里 边 被 称 为 后 代 选 择 器 ,因为 它 选 择 ID 为 content 的 元 素 内 所 有 命中 选择 器 article 和 
asidqe 的 元 素 。 但 在 有 些 情况 下 你 却 不 会 希望 Sass 使 用 这 种 后 代 选 择 器 的 方式 生成 这 种 连接 。 

最 常见 的 一 种 情况 是 当 你 为 链接 之 类 的 元 素 写 : hover 这 种 伪 类 时 ,你 并 不 希望 以 后 代 选 择 
僵 的 方式 连接 。 比 如 说 ， 下 面 这 种 情况 Sass 就 无 法 正常 工作 : 


article a { 











color: blue; 
:hover { color: red } 


Í 

这 意味 着 color: red 这 条 规则 将 会 被 应 用 到 选择 器 article a :hover, articleJL6A Jj 
链接 的 所 有 子 元 素 在 被 hover 时 都 会 变 成 红色 。 这 是 不 正确 的 ! 你 想 把 这 条 规则 应 用 到 超 链接 目 
了 配 ， 而 后 代 选 择 融 的 方式 无 法 帮 你 实现 。 

解决 之 道 为 使 用 一 个 特殊 的 Sass 选 择 占 ， 即 父 选择 器 。 在 使 用 和 能 套 规则 时 ， 父 选择 需 能 对 于 
瞬 套 规则 如 何 解 开 提 供 更 好 的 控制 。 它 就 是 一 个 简单 的 & 符 号 ， 且 可 以 放 在 任何 一 个 选择 名 可 出 
现 的 地 方 ， 比 如 nh1 放 在 哪 ， 它 就 可 以 放 在 哪 。 


article a { 











color: blue; 
&:hover ( color: red } 


HE CPER ATREA TATE, EAS UR T GRETESBEESETIDEPE,. MilkeE 
父 选择 胡 百 接 答 换 : 


article a { color: blue } 
article a:hover { color: red } 


在 为 父 级 选择 器 添加 : hovez 等 伪 类 时 ， 这 种 方式 非常 有 用 。 同 时 父 选 择 器 标识 符 还 有 另外 
一 种 用 法 ， 你 可 以 在 父 选择 器 之 前 添加 选择 絮 。 举 例 来 说 ， 当 用 户 在 使 用 IE 浏 览 响 时 ,你 会 通过 
JavaScript 在 <body> 标 签 上 添加 一 个 ie 的 类 名 ， 为 这 种 情况 编写 特殊 的 样式 如 下 : 


#content aside { 








22 Æ CSS 规则 29 


color: red; 


body.ie & { color: green j 
} 
Sass E FEAE EEJ TE BERI, 即使 是 各 有 父 选择 各 的 情况 。 当 Sass 遇 到 群 组 选择 帮 ( 由 
多 个 去 号 分 隔 开 的 选择 需 形 成 ) 也 能 完美 地 人 处理 这 种 般 套 。 











2.2.2 ”和 群 组 选择 器 的 藤 套 


在 CSS 里 边 , 选择 器 h1、h2 和 h3 会 同时 命中 hn1 元 素 、h2 元 素 和 h3 元 素 。 与 此 类 似 ，.button、 
button 会 命中 button 元 泰和 类 名 为 .button 的 元 素 。 这 种 选择 古称 为 群 组 选择 器 。 群 组 选择 此 
的 规则 会 对 命中 群 组 中 任何 一 个 选择 需 的 元 素 生 效 。 

.button, button 1 


margin: 0; 


当 看 到 上 边 这 段 代 码 时 ,你 可 能 还 没 意 识 到 会 有 重复 性 的 工作 。 但 会 很 快 发 现 : 如 来 你 需要 
在 一 个 特定 的 容 胡 元 条 内 对 这 样 一 个 群 组 选择 六 进行 修饰 ,情况 束 不 同 了。CSS 的 写法 会 让 你 在 
和 群 组 选择 带 中 的 每 一 个 选择 带 前 痢 午 复 一 吉 容 带 元 素 的 选择 带 。 

.container h1, .container h2, .container h3 { margin-bottom: .8em } 

JEF, Sashi k ERER A PUES Hl. Sassi H — T PEREA] VAI ER 
WAWR, ESERE M ANERER AAR YE AEK : 

.container { 


hi, h2, h3 {margin-bottom: .8em} 
} 


首先 Sass 将 . container 和 h1、.container 和 h2、.container 和 h3 分 别 组 合 ， 然 后 将 三 
者 重新 组 合成 一 个 群 组 选择 震 ， 生 成 你 前 边 看 到 的 普通 CSS 样 式 。 对 于 内 瞬 在 群 组 选择 需 内 的 舰 
套 规 则 ， 处 理 方式 也 一 样 : 


nav, aside { 





























a {color: blue} 


} 

首 先 Sass 将 nav 和 a、aside 和 a 分 别 组合 ， 然 后 将 二 者 重新 组 合成 一 个 群 组 选择 天 : 

nav a, aside a (color: blue) 

A FEX PPAF PE PER AU ES EREKE, IEAESasstEJAR P 38 e C53 77 IET) Dt o 7L 
EE pee OA SW ES SAUE, SAMASSA AHE, HUEL.ÓCGRDHETHYSTESROA 
大 减少 了 工作 量 。 

有 利 必 有 雌 ， 你 需要 特别 注意 群 组 选择 带 的 规则 骸 套 生成 的 CSS。 虽 然 Sass 让 你 的 样式 表 看 
上 去 很 小 ， 但 实际 生成 的 CSS 却 可 能 非常 大 ， 这 会 降低 网 站 的 速度 。 

关于 选择 器 和 能 套 的 最 后 一 个 方面 , 我们 看 看 Sass 如 何 处 理 组 合 选择 器 ， 比 如 > 、+ 和 -~ 的 使 用 。 
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你 将 看 到 ， 这 种 场景 下 你 甚至 无 需 使 用 父 选 择 表 标识 符 。 
2.2.3 子 组 合 选择 器 和 同 层 组 合 选择 器 : >、+ 和 ~ 


上 边 这 三 个 组 合 选择 融 必 须 和 其 他 选择 带 配 合 使 用 , 以 指定 浏览 融 仅 选择 菏 种 特定 上 下 文中 
的 元 系 。 


article section ( margin: 5px ) 





article > section { border: 1px solid #ccc } 


fn] ARTT RA ETE »YETÉ— T TUR II ELE T 2UR o EAF , Beat article 
RHJBPÉS üp'PsectionitffskWHJJUAR. PMES 流 择 articie 下 紧 跟 着 的 子 元 来 中 命 prp 


section t Err JUZ o 

在 下 例 中 ， 你 可 以 用 同 层 相 邻 组 合 选择 需 + 选 择 hneaqez 元 素 后 紧 跟 的 p 元 素 : 

header + p ( font-size: 1.1em ) 

你 也 可 以 用 同 层 全 体 组 合 选择 需 ~， 选 择 所 有 跟 在 article 后 的 同 层 article 元 素 ， 不 管 它 
们 之 间隔 了 多 少 其 他 元 素 : 

article ~ article { border-top: 1px dashed #ccc } 

puttzg e edis n] LL ES 6 7) RI E Sass hE RF np EET DIOE PNE YeTfE sm 
边 ， 或 里 层 选 择 右 前 边 


article { 

~ article { border-top: lpx dashed #ccc } 
> section { background: #eee } 

dl > { 
dt ( color: 4333 ) 
dd { color: $555 } 

} 

nav + & { margin-top: 0 } 


} 
Sass 会 如 你 所 愿 地 将 这 些 藤 套 规 则 一 一 解 开 组 合 在 一 起 : 


article ~ article { border-top: 1px dashed #ccc } 
article > footer { background: #eee } 

article dl > dt { color: #333 } 

article dl > dd { color: #555 } 

nav + article { margin-top: 0 j 


在 Sass 中 ， 不 仅仅 CSS 规 则 可 以 磐 套 ， 对 属性 进行 能 套 也 可 以 减少 很 多 重复 性 的 工作 。 
2.24 BERE 


在 Sass 中 ， 除 了 CSS 选 择 闫 ， 属 性 也 可 以 进行 般 僚 。 尽 管 编写 属性 涉及 的 重复 不 像 编 写 选 择 
fJ ZA SEE , 但 是 要 反复 写 border-style、 border-width, border-colorl/RKborder-* 
等 也 是 非常 烦人 的 。 在 Sass 中 ， 你 只 需 敲 写 一 裔 border: 
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nav ( 
border: 1 
style: solid; 
widths 1px; 
color: #ccc; 
} 
} 


攀 套 属性 的 规则 是 这 样 的 : 把 属性 名 从 中 划 线 -的 地 方 断 开 ， 在 根 属性 后 边 添 加 一 个 冒号 : ， a 
紧 跟 一 个 { } 块 ， 把 子 属性 部 分 写 在 这 个 { } 块 中 。 就 像 CSS 选 择 融通 套 一 样 ，Sass 会 把 你 的 子 属 
性 一 一 解 开 ， 把 根 属性 和 子 属性 部 分 通过 中 划 线 -连接 起 来 ， 最 后 生成 的 效果 与 你 手动 一 遍 遍 写 

的 CSS 样 式 一 样 : 


nav { 








border-style: solid; 
border-width: 1px; 
border-color: #ccc; 


XI TUSTEBJARTSJEX, MEEMAAK, HAAN : 


nav { 
border: 1px solid #ccc { 
left: 0px; 
right: 0px; 
} 
} 


这 比 下 边 这 种 同等 样式 的 写法 要 好 : 
nav ( 
border: 1px solid #ccc; 
border-left: Opx; 


border-right: 0px; 
j 


IS VERDE TES ESE EBRR, 因为 它们 不 仅 大 大 减少 了 你 的 编写 量 ,， 而 且 通 过 视觉 
上 的 缩 进 使 你 编写 的 样式 结构 更 加 清晰 ， 更 吻 于 阅读 和 开发 。 

即便 如 此 ， 随 春 你 的 样式 表 变 得 越 来 越 大 ,这 种 写法 也 很 难保 持 结构 清晰 。 有 时 ， 处 理 这 种 
大 量 样式 的 唯一 方法 就 是 把 它们 分 拆 到 多 个 文件 中 。S$ass 通 过 对 CSS 原 有 eimport 规 则 的 改进 二 
接 文 持 了 这 一 特性 。 


2.3 导入 Sass 文件 


CSS 有 一 个 特别 不 常用 的 特性 ， 即 @import 规 则 ， 它 允许 在 一 个 CSS 文 件 中 导入 其 他 CSS 文 
fF. 然而， 后 末 是 只 有 执行 到 @import 时 ,浏览 带 才 会 去 下 载 其 他 CSS 文 件 ， 这 导致 页 面 加 载 起 
来 特别 慢 。 

Sass 也 有 一 个 @import 规 则 ， 但 不 同 的 是 ，Sass 的 @import 规 则 在 生成 CSS 文 件 时 就 把 相关 
文件 寻 人 进来 。 这 意味 着 所 有 相关 的 样式 被 归纳 到 了 同一 个 CSS 文 件 中 ， 而 无 需 发 起 额外 的 下 载 
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请 求 。 男 外 ， 所 有 在 被 导入 文件 中 定义 的 变量 和 混合 右 ( 参见 2.5 市 ) 均 可 在 导入 文件 中 使 用 。 
使 用 Sass 的 eimport 规 则 并 不 需要 指明 被 导入 文件 的 全 名 。 你 可 以 省 略 .sass 或 ,scss 文 件 后 组 

(参见 图 2-1 ), 这 样 , 在 不 修改 样 陈 表 的 前 提 下 ,你 完全 可 以 随意 修改 你 或 别人 写 的 被 导 人 的 Sass 

样式 文件 语法 ， 在 Sass 和 Scss 语 法 之 间 随 意 切 换 。 举 例 来 说 ，@import"sidebar"; 这 条 命令 将 


把 sidebar.scss 文 件 中 所 有 样式 添加 到 当前 样式 表 中 。 
(Qimport "colors"; | 
(Qimport "mixins"; mixins.scss 
(Qimport "grid"; 
图 2-1 导入 Sass 文 件 


本 市 将 介绍 如 何 使 用 Sass 的 @import 来 处 理 多 个 Sass 文 件 。 首 先 ， 我 们 将 学 习 编 写 那 些 被 导 
人 的 Sass 文 件 ， 因 为 在 一 个 大 型 Sass 项 目 中 ， 这 样 的 文件 是 你 最 第 编写 的 那 一 类 。 接 痢 ，T 了 解 集 
中 导入 Sass 文 件 的 方法 ,使 你 的 样式 可 重用 性 更 高 ， 包 括 声 明 可 有 目 定 义 的 变量 什 ， 以 及 在 某 一 个 
选择 需 范 围 内 导入 S$ass 文 件 。 最 后 ， 介 绍 如 何在 Sass 中 使 用 CSS 原 生 的 eaimport 命 令 。 

通常 ， 有 些 Sass 文 件 用 于 导入 ,你 并 不 希望 为 每 个 这 样 的 文件 单独 地 生成 一 个 CSS 文 件 。 对 
此 ，Sass 用 一 个 特殊 的 约定 来 解决 。 


2.3.1 使 用 Sass 部 分 文件 


当 通 过 @import 把 Sass 样 式 分 散 到 多 个 文件 时 ， 你 通常 只 想 生 成 少数 几 个 CSS 文 件 。 那 些 专 
门 为 &@import 命 令 而 编写 的 Sass 文 件 ， 并 不 需要 生成 对 应 的 独立 CSS 文 件 ， 这 样 的 Sass 文 件 称 为 
局 部 文件 。 对 此 ，Sass 有 一 个 特殊 的 约定 来 命名 这 些 文件 。 

此 约定 即 ，Sass 局 部 文件 的 文件 名 以 下 划 线 开头 。 这 样 ，S$ass 承 不 会 在 编 详 时 单独 编译 这 个 
文件 输出 CSS， 而 只 把 这 个 文件 用 作 导 入 。 当 你 @import 一 个 局 部 文件 时 ， 还 可 以 不 写 文件 的 全 
名 ， 即 省 略 文件 名 开头 的 下 划 线 。 人 举例 来 说 ， 你 想 导 和 人 themes/_night-sky.scss 这 个 局 部 文件 里 的 
变量 ， 你 只 需 在 样式 表 中 写 eimport "themes/night-sky";. 

局 部 文件 可 以 被 多 个 不 同 的 文件 引用 。 当 一 些 样式 需要 在 多 个 页 面 甚 至 多 个 项 目 中 使 用 时 ， 
这 非常 有 用 。 在 这 种 情况 下 ， 有 时 需要 在 你 的 样式 表 中 对 导 和 人 的 样式 稍 作 修 改 ，Sass 有 一 个 功能 
刚好 可 以 解决 这 个 问题 ， 即 默认 变量 但 。 
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2.3.2 默认 变量 值 
一 般 情 况 下 , 你 反复 声明 一 个 变量 , 只 有 最 后 一 处 声明 有 效 且 它 会 禾 冀 前 边 的 值 。 举例 说 明 : 


$link-color: blue; 
Slink-color: red; 





a t 
color: Slink-color; 


} 

在 上 边 的 例子 中 ， 超 链接 的 color 会 被 设置 为 reda。 这 可 能 并 不 是 你 想 要 的 结果 ， 假 如 你 写 
了 一 个 可 被 他 人 通过 @import 导 入 的 Sass 库 文件 ， 你 可 能 希望 导 人 者 可 以 定制 修改 Sass 库 文件 中 
的 某 些 值 。 使 用 Sass 的 :aefault 标 签 可 以 实现 这 个 目的 。 它 很 像 CSS 属 性 中 :important 标 签 的 
对 立 面 ， 不 同 的 是 :aefault 用 于 变量 ， 含 义 是 : 如 果 这 个 变量 被 声明 赋值 了 ， 那 就 用 它 声 明 的 
值 ， 否 则 就 用 这 个 默认 值 。 


S$fancybox-width: 400px !default; 





. fancybox { 
width: Sfancybox-width; 
} 


在 上 例 中 ， 如 采用 户 在 导 和 人 你 的 Sass 局 部 文件 之 前 声明 了 一 个 $fancybox-wiath 变 量 ， 那 
么 你 的 局 部 文件 中 对 $fancybox-width 赋 值 400px 的 操作 就 无 效 。 如 果 用 户 没有 做 这 样 的 声明 ， 
则 Sfancybox-width 将 默认 为 400px。 

接 下 来 我 们 将 学 习 藤 套 导入 ， 它 允许 只 在 某 一 个 选择 可 的 范围 内 导入 Sass 局 部 文件 。 











2.3.3 WESA 


跟 原 生 的 CSS 不 同 ，S$ass 人 允许 eimport 命 令 写 在 CSS 规 则 内 。 这 种 导入 方式 下 ， 生 成 对 应 的 
CSS 文 件 时 ， 局 部 文件 会 被 直接 插入 到 CSS 规 则 内 导入 它 的 地 方 。 举 例 说 明 ， 有 一 个 名 为 
_blue-theme.scss 的 局 部 文件 ， 内 容 如 下 : 


aside { 
background: blue; 
color: white; 


} 
然后 把 它 导 入 到 一 个 CSS 规 则 内 ， 如 下 所 示 : 


.blue-theme {@import "blue-theme"} 


生成 的 结果 跟 你 直接 在 .blue-theme 选 择 售 内 写 blue-theme.scss 文 件 的 内 容 完 全 一 样 。 











.blue-theme { 
aside { 
background: blue; 
color: #fff; 
} 
} 
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被 导 和 人 的 局 部 文件 中 和 定义 的 所 有 变量 和 混合 需 〈 参 见 2.$ 闻 )， 也 会 在 这 个 规则 范围 内 生效 。 
这 些 变量 和 混合 需 不 会 全 局 有 效 , 这 样 我 们 就 可 以 通过 散 套 导入 只 对 站 点 中 某 一 特定 区 域 运用 某 
种 颜色 主题 或 其 他 通过 变量 配置 的 样式 。 

有 时 ， 可 用 CSS 原 生 的 eimport 机 制 ， 在 浏览 着 中 下 载 必需 的 CSS 文 件 。Sass 也 提供 了 几 种 
方法 来 达成 这 种 需求 。 











2.3.4 原生 的 CSS 导 入 


由 于 Sass 兼 容 原生 的 CSS ， 所 以 它 也 文 持 原生 的 CSSeimport。 尽 管 通 稼 在 Sass 中 使 用 
@import 时 ，Sass 会 尝试 找到 对 应 的 Sass 文 件 并 导入 进来 ,但 在 下 列 三 种 情况 下 会 生成 原生 的 
CSS@import， 人 尽管 这 会 造成 浏览 各 解 析 CSS 时 的 额外 下 载 : 

O 被 导入 文件 的 名 字 以 .css 结 

口 被 导入 文件 的 名 字 是 一 个 URL 地 址 ( 比如 http://sass-lang.com/stylesheets/application.css ), FH 

此 可 用 谷歌 字体 API 提 供 的 相应 服务 ; 

口 被 导入 文件 的 名 字 是 CSS 的 url () 值 。 

这 就 是 说 ， 你 不 能 用 Sass 的 eimport 百 接 导 和 人 一 个 原始 的 CSS 文 件 ， 因 为 Sass 会 认为 你 想 用 
CSS 原 生 的 @import。 但 是 ， 因 为 Sass 的 语法 完全 莱 容 CSS， 所 以 你 可 以 把 原始 的 CSS 文 件 改 名 
为 .scss 后 经， 即 可 下 接 导入 了 了。 

文件 导入 是 保证 Sass 的 代码 可 维护 性 和 可 读 性 的 重要 一 环 。 次 之 但 亦 非常 重要 的 就 是 注释 
了 。 注 释 可 以 帮助 样式 作者 记录 写 Sass 的 过 程 中 的 想法 。 在 原生 的 CSS 中 ， 注 释 对 于 其 他 人 是 和 下 
接 可 见 的 ， 但 Sass 提 供 了 一 种 方式 可 在 生成 的 CSS 文 件 中 按 需 抹 挥 相应 的 注释 。 


2.4 BRENETS 


CSS 中 注释 的 作用 包括 帮助 你 组 织 样式 、 以 后 你 看 自己 的 代码 时 明白 为 什么 这 样 写 ， 以 及 简 
单 的 样式 说 明 。 但 是 ， 你 并 不 希望 每 个 浏览 网 站 源码 的 人 都 能 看 到 所 有 注释 。 
Sass 男 外 提供 了 一 种 不 同 于 CSS 标 准 注释 格式 /* ... */ 的 注释 语法 ， 即 静默 注释 ， 其 内 容 
不 会 出 现在 生成 的 CSS 文 件 中 。 静 默 注释 的 语法 跟 JavaScript、Java 等 类 C 的 语言 中 单行 注释 的 语 
法 相同 ， 它 们 以 /7/ 开头， 注释 内 容 直 到 行 末 。 
body { 
color: #333; // 这 种 注释 内 容 不 会 出 现在 生成 的 css 文 件 中 
padding: 0; /* 这 种 注释 内 容 会 出 现在 生成 的 css 文 件 中 */ 
} 
实际 上 ，CSS 的 标准 注释 格式 /* ... */ 内 的 注释 内 容 亦 可 在 生成 的 CSS 文 件 中 抹 去 。 当 注 
释 出 现在 原生 CSS 不 允许 的 地 方 , 如 在 CSS 属 性 或 选择 融 中 ,Sass 将 不 知 如 何 将 其 生成 到 对 应 CSS 
文件 中 的 相应 位 置 ， 于 是 这 些 注释 被 抹 掉 。 


body { 
color /* 这 块 注释 内 容 不 会 出 现在 生成 的 css 中 */: #333; 


























padding: lem; /* 这 块 注释 内 容 也 不 会 出 现在 生成 的 css 中 */ 0; 
} 
你 已 经 掌握 了 Sass 的 静默 注释 ,， 了解 了 保持 Sass 条 理性 和 可 读 性 的 最 基本 的 三 个 方法 : BOE. 
导入 和 注释 。 现在 , 我 们 要 进一步 学 习 新 特性 , 这 样 我 们 不 但 能 保持 条 理性 还 能 写 出 更 好 的 样式 。 
首先 要 介绍 的 内 容 是 : 使 用 混合 天 抽象 你 的 相关 样式 。 











2.5 混合 器 


如 有 果 你 的 整个 网 站 中 有 几 处 小 小 的 样式 类 似 ( 例如 一 致 的 颜色 和 字体 )， 那 么 使 用 变量 来 统 
一 处 理 这 种 情况 是 非常 不 错 的 选择 。 但 是 当 你 的 样式 变 得 越 来 越 复杂 , 你 需要 大 段 大 段 的 重用 样 
式 的 代码 , 独立 的 变量 就 没 办 法 应 付 这 种 情况 了 。 你 可 以 通过 Sass 的 混合 需 实 现 大 段 样式 的 重用 。 

混合 需 使 用 emixin 标 识 符 定义 。 看 上 去 很 像 其 他 的 CSS @ 标 识 符 ， 比 如 说 emedia 或 者 CSS3 
的 @font-face。 这 个 标识 符 给 一 大 上 段 样式 赋 也 一 个 名 字 ， 这 样 你 就 可 以 轻易 地 通过 引用 这 个 名 
字 重 用 这 段 样式 。 下 边 的 这 段 Sass 代 码 ， 定 义 了 一 个 非常 简单 的 混合 疾 ， 目 的 是 瀛 加 器 浏览 可 的 
圆 角 边框 。 


@mixin rounded-corners { 





-moz-border-radius: 5pX; 
-webkit-border-radius: 5px; 
border-radius: 5px; 


然后 就 可 以 在 你 的 样式 表 中 通过 eincluqe 来 使 用 这 个 混合 种 ， 放 在 你 和 希望 的 任何 地 方 。 
8@include 调 用 会 把 混合 带 中 的 所 有 样式 提取 出 来 放 在 8@inclugde 钻 调用 的 地 方 。 如 来 像 下 边 这 样 写 : 


.notice i 





background-color: green; 
border: 2px solid :400aa00; 
Qinclude rounded-corners; 


} 
Sass 最 终生 成 : 


notice 4 
background-color: green; 
border: 2px solid #00aa00; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 


j 

在 .notice 中 的 属性 porder-radius、-moz-border-radius 和 -wepbkit-border-radius 
全 部 来 和 目 xoundedq-corners 这 个 混合 右 。 这 一 节 将 介绍 使 用 混合 融 来 避免 重复 。 通 过 使 用 参数 ， 
你 可 以 使 用 混合 希 把 你 样式 中 的 通用 样式 抽 离 出 来 ， 然 后 轻松 地 在 其 他 地 方 重用 。 实 际 上 ， 混 合 
条 太 好 用 了 ,一 不 小 心 你 可 能 会 过 度 使 用 。 大 量 的 重用 可 能 会 导致 生成 的 样式 表 过 大 ， 导 致 加 载 
缓慢 。 所 以 ， 首 先 我 们 将 讨论 混合 顺 的 使 用 场景 ， 避 免 滥 用 。 
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2.5.1 何 时 使 用 混合 器 

利用 混合 硕 , 可 以 很 容易 地 在 样式 表 的 不 同 地 方 共享 样式 。 如 果 你 发 现 目 己 在 不 停 地 重复 一 
段 样式 ， 那 就 应 该 把 这 段 样 式 构造 成 优 民 的 混合 各 ,尤其 是 这 上 段 样式 本 刁 就 是 一 个 逻辑 单元 ， 比 
如 说 是 一 组 放 在 一 起 有 意义 的 属性 。 

判断 一 组 属性 是 否 应 该 组 合成 一 个 混合 融 , 一 条 经 验 法 则 就 是 你 能 否 为 这 个 混合 硕 想 出 一 个 
好 的 名 字 。 如 采 你 能 找到 一 个 很 好 的 短 名 字 来 撒 述 这 些 属性 修饰 的 样式 ,比如 *oundedq-corners、 
fancy- font 或 者 no-pullets 那么 往往 能 够 构造 一 个 合适 的 混合 需 。 如 果 你 找 不 到 , 这 时 候 
构造 一 个 混合 需 可 能 并 不 合适 。 

混合 需 在 某 些 方面 跟 CSS 类 很 像 。 都 是 让 你 给 一 大 段 样式 命名 ， 所 以 在 选择 使 用 哪个 的 时 候 
可 能 会 产生 疑惑 。 最 重要 的 区 别 就 是 类 名 是 在 HTMEL 文 件 中 应 用 的 ， 而 混合 器 是 在 样式 表 中 应 用 
的 。 这 就 意味 看 类 名 具有 语义 化 含义 ， 而 不 仅仅 是 一 种 展示 性 的 描述 : 用 来 描述 HTML 元 系 的 含 
义 而 不 是 HTML 元 素 的 外 观 。 而 另 一 方面 ， 混 合 需 是 展示 性 的 描述 ， 用 来 描述 一 条 CSS 规 则 应 用 
之 后 会 产生 怎样 的 效果 。 

在 之 前 的 例子 中 ，.notice 是 一 个 有 语义 的 类 名 。 如 果 一 个 HTML 元 系 有 一 个 notice 的 类 
名 ， 就 表明 了 这 个 HTML 元 又 的 用 途 : 回 用 户 展示 提醒 信息 。rounadedq-corners 混 合 送 是 展示 
性 的 ， 它 描述 了 包含 它 的 CSS 规 则 最 终 的 视觉 样式 ， 尤 其 是 边框 角 的 视觉 样式 。 

混合 器 和 类 配合 使 用 写 出 整洁 的 HTML 和 CSS， 因 为 使 用 语义 化 的 类 名 亦 可 以 帮 你 避免 重复 
使 用 混合 顺 。 为 了 保持 你 的 HIML 和 CSS 的 易 读 性 和 可 维护 性 ， 在 写 样 式 的 过 程 中 一 定 要 铭记 二 
者 的 区 别 。 

有 时 候 仅 仅 把 属性 放 在 混合 希 中 还 远 远 不 够 ， 可 喜 的 是 ，S$ass 同 样 允 许 你 把 CSS 规 则 放 在 混 
rir s 
















































































2.5.2 ”混合 器 中 的 CSS 规 则 


混合 融 中 不 仅 可 以 包含 属性 ， 也 可 以 包含 CSS 规 则 ， 包 含 选 择 硕 和 选择 需 中 的 属性 ， 如 代码 
清单 2-1 所 示 。 


代码 清单 2-1 包含 CSS 规 则 的 选择 天 


Qmixin no-bullets { 
list-style: none; 
li 4d 
list-style-image: none; 
list-style-type: none; 
margin-left: 0px; 
} 
} 


当 一 个 包含 CSS 规 则 的 混合 器 通过 eincludqe 包 含 在 一 个 父 规则 中 时 ， 在 混合 器 中 的 规则 最 
终 会 生成 父 规则 中 的 般 套 规则 。 举 个 例子 , 看 看 下 边 的 Sass 代 码 , 这 个 例子 中 使 用 了 no-bullets 


这 个 混合 带 : 


ul.plain 1 
color: #444; 
Qinclude no-bullets; 


) 
Sass 的 einclude 指 令 会 将 引入 混合 需 HIT TIERRA EG m HI 的 内 容 。 
例子 如 代码 清单 2-2 所 示 。 


代码 清单 2-2 在 ul .plain 中 包含 了 no-pbullets 的 最 终 代 码 


ul.plain 1 
color: #444; 
list-style: none; 
} 
ul.plain li { 





list-style-image: none; 
list-style-type: none; 
margin-left: 0px; 


} 

混合 希 中 的 规则 甚至 可 以 使 用 Sass 的 父 选 择 天 标识 符 &。 使 用 起 来 跟 不 用 混合 融 时 一 样 ，Sass 
解 开 亦 套 规则 时 ， 用 父 规则 中 的 选择 名 蔡 代 g。 

如 采 一 个 混合 硕 只 包含 CSS 规 则 ， 不 包含 属性 ， 那 么 这 个 混合 融 就 可 以 在 文档 的 顶部 调用 ， 
写 在 所 有 的 CSS 规 则 之 外 。 如 采 你 只 是 为 目 己 写 一 些 混 合 希 ， 这 并 没有 什么 大 的 用 途 ,， 但 是 当 你 
使 用 一 个 类 似 于 Compass 的 库 时 ， 你 会 发 现 ， 这 是 提供 样式 的 好 方法 ， 原 因 在 于 你 可 以 选择 是 否 
使 用 这 些 样式 。 

接 下 来 你 将 学 习 如 何 通 过 给 混合 页 传 参数 来 让 混合 需 变 得 更 加 灵活 和 可 重用 。 





























混合 融 并 不 一 定 总 得 生成 相同 的 样式 。 可 以 通过 在 eincludqe 混 合 器 时 给 混合 需 传 参 ， 来 定 
制 混合 硕 生 成 的 精确 样式 。 当 einclude 混 合 髓 时 ， 人 参数 其 实 就 是 可 以 赋值 给 CSS 属 性 值 的 变量 。 
如 果 你 写 过 JavaScript， 这 种 方式 跟 JavaScript 的 function 很 像 


@mixin link-colors($normal, Shover, Svisited) { 
color: Snormal; 








&:hover { color: Shover; ) 
&:visited ( color: S$visited; ) 


"Hn ut Oincludelt, MA LAU *4TE— T CSSPRBOR TES. WORT ARE : 


a t 
Ginclude link-colors(blue, red, green); 


} 
Sass 最 终生 成 的 是 : 


a { color: blue; } 
a:hover ( color: red; } 
a:visited { color: green; } 
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当 你 eincluae 混 合 器 时 ， 有 时 候 可 能 会 很 难 区 分 每 个 参数 是 什么 意思 ， 参 数 之 间 是 一 个 什 
入 样 的 顺序 。 为 了 解决 这 个 问题 ，Sass 人 允许 通过 语法 sname: value 的 形式 指定 每 个 参数 的 值 。 
这 种 形式 的 传 参 ， 参 数 顺序 就 不 必 再 在 乎 了 ， 只 需要 保证 没有 漏 掉 参 数 即 可 


a { 
QGinclude link-colors( 





$normal: blue, 
S$visited: green, 
$Shover: red 
) ;7 
} 


尽管 给 混合 器 加 参数 来 实现 定制 很 好 , 但 是 有 时 有 些 参数 我 们 没有 定制 的 需要 , 这 时 候 也 需 
要 赋值 一 个 变量 就 变 成 很 痛苦 的 事情 了 。 所 以 Sass 人 允许 混合 器 声明 时 给 参数 赋 默 认 值 。 
2.5.4 默认 参数 值 


为 了 在 einclude 混 合 需 时 不 必 传 人 所 有 的 参数 ， 我 们 可 以 给 参数 指定 一 个 默认 值 。 人 参数 默 
认 值 使 用 $name: default-value 的 声明 形式 , SA A ER] 以 是 任何 有 效 的 CSS 属 性 值 至 是 
其 他 参数 的 引用 ， 如 代码 清单 2-3 所 示 。 
代码 清单 2-3 设置 参数 默认 值 


@mixin link-colors( 


























$normal, 

Shover: $normal, 

$visited: $normal 

E! 

color: S$normal; 

&:hover { color: Shover; } 
&:visited { color: Svisited; } 


} 

如 果 像 下 边 这 样 调用 : @include link-colors(red), shover 和 $visited 也 会 被 自动 
赋值 为 red。 

混合 关上 只 是 Sass 样 式 重 用 特性 中 的 一 个 。 我 们 已 经 了 解 到 混合 天 主要 用 于 样式 展示 层 的 重 














2.6 ”使 用 选择 器 继承 来 精简 CSS 


使 用 Sass 的 时 候 , 最 后 一 个 减少 重复 的 主要 特性 就 是 选择 器 继承 。 基 于 Nicole Sullivan jhi X} 
象 的 CSS 的 理念 ， 选 择 回 继承 是 说 一 个 选择 器 可 以 继承 为 另 一 个 选择 器 定义 的 所 有 样式 。 这 个 通 
过 @extend 语 法 实现 ， 如 代码 清单 2-4 所 示 。 
代码 清单 2-4 ”通过 选择 上 磊 继承 继承 样式 


.error { 
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border: 1px red; 
background-color: tdfdd; 
} 
.SeriousError { 
Qextend .error; 
border-width: 3px; 
} 
在 上 边 的 代码 中 ，. seriousError 将 会 继承 样式 表 中 任何 位 置 处 为 .error 定 义 的 所 有 样 
A o 以 class-"'seriousError" f£ i Bj HTML 76 R Ad £A By hé zw XX M wh Uf [A lE 
class-"seriousError error", JH2OXZURA HH — T 3px SL BJXJTE, muU Hie XE TREE 
成 红色 的 ， 这 个 元 系 同时 还 会 有 一 个 浅 红 色 的 背景 ， 因 为 这 些 都 是 在 .error 里 边 定 义 的 样式 。 
. SeriousError 不 仅 会 继承 .error 目 丑 的 所 有 样式 ,任何 跟 .error 有 关 的 组 合 选择 兹 样式 
也 会 被 .seriousError 以 组 合 选择 天 的 形式 继承 ， 如 代码 清单 2-5 所 示 。 


代码 清单 2-5 .seriousError 从 .error 继 承 样式 
.error a { 
color: red; i 应 用 到 . seriousError a 
font-weight: bold; 
} 














hi.error 1 
font-size: 1.3em; i 应 用 到 hl .seriousError 
j 


lil -Etzks, TEclass-"seriousError"BHJHTMLZJUZsVJIMPER BE ZEH, Z705 EET Ca RIVERS 
KEPKA iR HE, BUR Pu c HAER, BE POIETEDRIRSIIOKI LEA D xL B, dX 
们 先 了 解 一 下 继承 的 高 级 用 法 。 最 后 , 我 们 将 看 看 使 用 继承 可 能 会 有 哪些 坑 , 学 习 如 何 避 人 免 这 些 坑 。 


2.6.4 何 时 使 用 继承 


2.5.1 廊 介绍 了 混合 各 主要 用 于 展示 性 样式 的 重用 , 而 类 名 用 于 语义 化 样式 的 重用 。 因 为 继承 
是 基于 类 的 〈《 有 时 是 基于 其 他 类 型 的 选择 磊 )， 所 以 继承 应 该 是 建立 在 语义 化 的 关系 上 。 当 一 个 
元 素 拥 有 的 类 C 比如 说 .seriousError ) 表明 它 属于 男 一 个 类 ( 比如 说 .error )， 这 时 使 用 继 
藉 再 合适 不 过 了 了 。 

这 有 点 抽象 ， 所 以 我 们 从 几 个 方面 来 阐释 一 下 。 想 象 一 下 你 正在 编写 一 个 页 面 ， 给 HTML 元 
素 添 加 类 名 ,你 发 现 你 的 某 个 类 ( 比如 说 .seriousError ) 另 一 个 类 ( 比如 说 .error ) 的 细 化 。 
你 会 怎么 做 ? 

Q 你 可 以 为 这 两 个 类 分 别 写 相同 的 样式 , 但 是 如 有 果 有 大 量 的 重复 怎么 办 ?使 用 Sass 时 , 我 们 

提倡 的 就 是 不 要 做 重复 的 工作 。 

a 你 可 以 使 用 一 个 选择 器 组 ( 比如 说 .error、.seriousError ) 给 这 两 个 选择 器 写 相同 的 

样式 。 如 采 .error 的 所 有 样式 都 在 同一 个 地 方 ， 这 种 做 法 很 好 ,但 是 如 采 是 分 散在 样式 
表 的 不 同 地 方 呢 ”再 这 样 做 就 困难 多 了 。 
口 你 可 以 使 用 一 个 混合 需 为 这 两 个 类 提供 相同 的 样式 ， 但 当 .erzroz 的 样式 修饰 遍布 样式 表 
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中 各 处 时 ， 这 种 做 法 面临 着 跟 使 用 选择 需 组 一 样 的 问题 。 这 两 个 类 也 不 是 恰好 有 相同 的 
样式 。 你 应 该 更 清晰 地 表达 这 种 关系 。 
Q 综 上 所 述 你 应 该 使 用 Gextend, iL. seriousError 从 . error 继 承 样式 使 两 者 之 间 的 关 
系 非 常 清晰 。 更 重要 的 是 无 论 你 在 样式 表 的 哪里 使 用 .error，. seriousError 都 会 继承 
其 中 的 样式 。 
现在 你 已 经 更 好 地 掌握 了 何 时 使 用 继承 ,以 及 继承 有 哪些 突出 的 优点 , 接 下 来 我 们 看 看 一 些 
高 级 用 法 。 


2.6.2 ”继承 的 高 级 用 法 


任何 CSS 规 则 都 可 以 继承 其 他 规则 ， 几 乎 任何 CSS 规 则 也 都 可 以 被 继承 。 大 多 数 情 况 你 可 能 
只 想 对 类 使 用 继承 ， 但 是 有 些 场合 你 可 能 想 做 得 更 多 。 最 常用 的 一 种 高 级 用 法 是 继承 一 个 HTML 
元 素 的 样式 。 尽 管 默认 的 浏览 器 样式 不 会 被 继承 ， 因 为 它们 不 属于 样式 表 中 的 样式 ， 但 是 你 对 
HTML 元 素 添加 的 所 有 样式 都 会 被 继承 ”。 

接 下 来 的 这 段 代 码 定 义 了 一 个 名 为 disabled 的 类 ， 样 式 修饰 使 它 看 上 去 像 一 个 灰 掉 的 超 链 
接 。 通 过 继承 a 这 一 超 链 接 元 素来 实现 : 

.disabled { 

color: gray; 


QGextend a; 


j 

假如 一 条 样式 规则 继承 了 一 个 复杂 的 选择 器 , 那么 它 只 会 继 素 这 个 复杂 选择 希 命 中 的 元 素 所 
应 用 的 样式 。 举 例 来 说 如 果 .seriousError @extend . important.error ， 那 
么 .important.error 和 h1.important .ertro 的 样式 都 会 被 .seriousError 继 承 但 
是 .important 或 者 .error 下 的 样式 则 不 会 被 继承 。 这 种 情况 下 你 很 可 能 希望 . seriousError 
能 够 分 别 继承 .important 或 者 .error 下 的 样式 。 

如 果 一 个 选择 大 序列 (#main .seriousError ) eextend 另 一 个 选择 需 ( .error), 那么 
只 有 完全 命中 #main .seriousError 这 个 选择 带 的 元 素 才 会 继承 .error 的 样式 ， 束 像 单个 类 
名 继承 那样 。 拥 有 class="seriousError" 的 .main 元 条 之 外 的 元 系 不 会 受到 影响 。 

像 #main .error 这 种 选择 带 序 列 是 不 能 被 继承 的 。 这 是 因为 从 #main .error 中 继承 的 样 
式 一 般 情 况 下 会 跟 下 接 从 .error 中 继承 的 样式 基本 一 人 臻 ， 细 微 的 区 别 往往 使 人 迷惑 。 

现在 你 已 经 7 了解 了 通过 继承 能 够 做 些 什 么 事情 , 接 下 来 我 们 将 学 习 继 承 的 工作 细 市 , 在 生成 
对 应 CSS 的 时 候 ，Sass 具 体 干 了 些 什么 事情 。 
































2.6.3 ”继承 的 工作 细 市 
跟 变 量 和 混合 器 不 同 ， 继 承 不 是 仅仅 用 CSS 样 式 替换 eextenda 处 的 代码 那么 简单 。 为 了 不 让 





CD 如 果 你 使 用 了 CSS 重 置 就 存在 争议 了 ， 因 为 浏览 需 默 认为 这 个 元 素 添 加 的 样式 都 会 被 你 的 样式 表 履 盖 。 


2.6 使 用 选择 器 继承 来 精简 CSS 4l 





RITE JI BUCSSIWS SrBE, IAE JG TEREA — E T fete Hg RS 
QGextendTi/r didis BAS E E f 如 果 .SeriousError Qextend .error, 那么 样式 表 中 的 
任何 一 处 .erroz 都 用 .error 、.seriousError 这 一 选择 带 组 进行 蔡 换 。 这 就 意味 独 相 关 样 式 会 
如 预期 那样 应 用 到 .error 和 .seriousError 。 当 .error 出 现在 复杂 的 选择 震中 ， 比 如 说 
hl.error, .error a 或 者 #main .sidebar input.error[type-"text"], 那 情况 就 变 得 
复杂 多 了 ， 但 是 不 用 担心 ，Sass 已 经 为 你 考虑 到 了 这 些 。 
关于 @extend 有 两 个 要 点 你 应 该 知道 。 
O 跟 混 合 带 相 比 ,继承 生成 的 CSS 代 人 码 相对 更 少 。 因 为 继承 仪 仅 是 重复 选择 融 ， 而 不 会 重复 
属性 ， 所 以 使 用 继承 往往 比 混合 器 生成 的 CSS 体 积 更 小 。 如 果 你 非常 关心 你 站 点 的 速度 ， 
请 牢记 这 一 点 。 
口 继承 遵从 CSS 层 登 的 规则 。 当 两 个 不 同 的 CSS 规 则 应 用 到 同一 个 HTML 元 素 上 时 ， 并 且 这 
两 个 不 同 的 CSS 规 则 对 同一 属性 的 修饰 存在 不 同 的 值 ，CSS 层 三 规 则 会 决定 应 用 哪个 样 
式 。 相 当下 观 : 通 稼 权重 更 高 的 选择 硕 胜 出 ， 如 末 权 重 相 同 ， 定 义 在 后 边 的 规则 胜出 。 
混合 天 本 吴 不 会 引起 CSS 层 例 的 问题 ， 因 为 混合 机 把 样式 百 接 放 到 了 CSS 规 则 中 ， 而 继 素 存 
在 样式 层 合 的 问题 。 被 继承 的 样式 会 保持 原 有 定义 位 置 和 选择 大 权重 不 变 。 通 津 来 说 这 并 不 会 引 
起 什么 问题 ， 但 是 知道 这 点 总 没有 坏处 。 


2.6.4 使 用 继承 的 最 佳 实践 


通常 使 用 继承 会 让 你 的 CSS 美 观 、 整 河 。 因 为 继承 只 会 在 生成 CSS 时 复制 选择 器 ， 而 不 会 复 
制 大 段 的 CSS 属 性 。 但 是 如 有 果 你 不 小 心 ， 可 能 会 让 生成 的 CSS 中 包含 大 量 的 选择 器 复制 。 

避免 这 种 情况 出 现 的 最 好 方法 就 是 不 要 在 CSS 规 则 中 使 用 后 代 选 择 器 ( 比如 .foo .bar ) X 
继承 CSS 规 则 。 如 果 你 这 么 做 ， 同 时 被 继承 的 CSS 规 则 有 通过 后 代 选 择 器 修饰 的 样式 ， 生 成 CSS 
中 的 选择 带 的 数量 很 快 就 会 失控 : 


.foo .bar { Qextend .baz; } 









































:bp -baz 1 a: D; J 

在 上 边 的 例子 中 ，Sass 必 须 保证 应 用 到 .baz 的 样式 同时 也 要 应 用 到 .foo .bar (位 于 
class="foo" 的 元 素 内 的 class="bar" 的 元 素 )。 例 子 中 有 一 条 应 用 到 .bip .baz (位 于 
class="bip" 的 元 素 内 的 class="baz" 的 元 素 ) 的 CSS 规 则 。 当 这 条 规则 应 用 到 . foo .bar 时 ， 
可 能 存在 三 种 情况 ， 如 代码 清单 2-6 所 示 。 


代码 清单 2-6 ”继承 可 能 迅速 变 复 攻 


<!-- Case 1 --> 
<div class="foo"> 


F 


<div class="bip"> 
<div class="bar">...</div> 
</div> 
</div> 
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<!-- Case 2 --> 
<div class="bip"> 
<div class="foo"> 
<div class="bar">...</div> 
</div> 
</div> 


«1-- Case 3 --> 
<div class="foo bip"> 

<div class="bar">...</div> 
</div> 


HTAR, Sassi LEN —RhefEsHGO (仅仅 是 .bip .foo .bar 不 能 覆盖 所 有 
情况 )。 如 果 任 何 一 条 规则 里 边 的 后 代 选 择 右 再 长 一 点 ，Sass 需 要 考虑 的 情况 就 会 更 多 。 实 际 上 
Sass 并 不 总 是 会 生成 所 有 可 能 的 选择 需 组 合 , 即使 是 这 样 , 选择 需 的 个 数 依 然 可 能 会 变 得 相当 大 ， 
所 以 如 果 人 允许 ， 尽 可 能 避免 这 种 用 法 。 

值得 一 提 的 是 ， 只 要 你 想 , 你 完全 可 以 放心 地 继承 有 后 代 选 择 器 修饰 规则 的 选择 器 ,不 管 后 
代 选 择 器 多 长 ， 但 有 一 个 前 提 就 是 ， 不 要 用 后 代 选 择 器 去 继承 。 


2.7. 


这 草 介 绍 了 构成 Sass 和 Compass 的 最 基本 部 分 。 通 过 这 章 介 绍 的 工具 你 可 以 轻松 地 使 用 Sass 
编写 清晰 、 无 元 余 、 语 义 化 的 CSS。 对 于 Sass 提 供 的 工具 你 已 经 有 了 一 个 比较 深入 的 了 解 ， 同 时 
也 掌握 了 何 时 使 用 这 些 工 具 的 指导 原则 。 

变量 是 Sass 提 供 的 最 基本 的 工具 。 通 过 变量 可 以 让 独立 的 CSS 值 变 得 可 重用 ， 无 论 是 在 一 条 单 
独 的 规则 范围 内 还 是 在 整个 样式 表 中 。 变 量 、 混 合 需 的 命名 甚至 Sass 的 文件 名 , 可 以 互 换 通用 和 -。 

同样 基础 的 是 Sass 的 欧 套 机 制 。 岗 套 允 许 CSS 规 则 内 航 套 CSS 规 则 ,减少 重复 编写 常用 的 选 
择 占 ， 同 时 让 样式 表 的 结构 一 眼 望 去 更 加 清晰 。Sass 同 时 提供 了 特殊 的 父 选 择 需 标识 符 色 ， 通 过 
它 可 以 构造 出 更 高 效 的 舰 套 。 

你 也 已 经 学 到 了 Sass 的 为 一 个 重要 特性 ， 样 式 导 入 。 通 过 样式 导入 可 以 把 分 散在 多 个 Sass 文 
件 中 的 内 容 合并 生成 到 一 个 CSS 文 件 ， 避 免 了 项 目 中 有 大 量 的 CSS 文 件 通 过 原生 的 CSS @import 
审 来 的 性 能 问题 。 通 过 上 磐 套 导入 和 默认 变量 值 ， 导 入 可 以 构建 更 强 有 力 的 、 可 定制 的 样式 。 

混合 需 人 允许 用 户 编 写 语 义 化 样式 的 同时 避免 视 党 层面 上 样式 的 重复 。 你 不 仅 学 到 了 如 何 使 用 
混合 帮 减 少 重 复 ， 同 时 学 习 到 了 如 何 使 用 混合 絮 让 你 的 CSS 变 得 更 加 可 维护 和 语义 化 。 

最 后 ， 我 们 学 习 了 与 混合 带 相 辅 相 成 的 选择 需 继 承 。 继 承 允 许 你 声明 类 之 间 语 义 化 的 关系 ， 
通过 这 些 关 系 可 以 保持 你 的 CSS 的 整洁 和 可 维护 性 。 

如 有 果 你 已 经 开始 应 用 在 这 童 学 到 的 内 容 ,， 那 么 你 已 经 可 以 写 出 很 好 的 Sass 了 ， 但 是 很 快 你 会 
开始 担忧 是 不 是 有 其 他 方法 可 以 做 得 更 好 。 你 会 考虑 如 何 使 混合 需 变 得 更 加 可 重用 ， 如 何 让 Sass 
帮 你 进行 一 些 计算 。 你 会 考虑 是 否 可 以 只 控制 一 个 颜色 变量 ， 束 改变 你 整个 站 点 的 主题 ， 以 及 是 
否 可 以 让 样式 高 度 可 重用 ， 以 便 在 你 的 站 点 以 及 你 的 朋友 间 随 意 分 享 。 

下 一 章 将 探索 学 习 Sass 的 脚本 特性 ， 通 过 这 个 特性 你 可 以 实现 上 边 提 到 的 一 切 。 

























































































在 实战 中 使 用 Sass 和 Compass 


通过 前 两 章 的 学 习 ， 你 已 经 结识 了 Sass 和 Compass， 并 且 了 解 了 Sass 语 法 的 核心 特性 。 接 下 
来 的 3 章 里 ， 你 将 看 到 Sass 和 Compass 在 实际 应 用 中 的 价值 ， 看 到 它们 如 何 帮助 你 解决 乙 前 枯燥 
之 味 的 任务 ， 助 你 通过 更 少量 的 工作 写 出 更 强 有 力 的 样式 表 。 

第 3 章 将 介绍 Compass 如 何 使 Web 设 计 中 最 基础 的 部 分 一 一 布局 变 得 简单。 在 这 一 章 ， 我 们 
探讨 网 格 布局 背后 的 原理 ， 以 及 Compass 提 供 的 能 够 使 网 格 布局 大 大 人 简化 旦 更 加 灵活 的 工具 。 传 
统 CSS 网 格 布局 系统 要 求 你 在 HIML 标 签 上 写 很 多 可 表明 样式 的 类 名 。 在 这 一 章 你 将 学 到 如 何在 
Compass 中 使 用 Blueprint 和 960 网 格 布局 系统 ， 从 而 避免 HIML 标 签 类 名 的 困扰 。 你 将 看 到 Sass 的 
动态 特性 如 何 帮 助 你 建立 起 一 个 网 格 布局 框架 ， 并 且 仪 仅 通 过 修改 儿 个 变量 能 就 轻 地 改变 它 。 
最 后 展示 如 何 运 用 Compass 的 排版 辅助 器 处 理 垂直 韵律 。 

党 4 革 将 深 挖 Compass 的 工具 箱 ， 看 看 Compass 的 混合 右 如 何 帮助 你 省 去 编写 重复 样 表 式 的 
六 苗 工 作 。Compass 通 过 动态 混合 颖 封装 了 很 多 经 典 的 样式 类 型 。 你 将 学 习 如 何 重 置 浏 览 顷 默认 
的 样式 ， 使 老 版 本 浏 贤 颖 支持 HTML5 标 签 。 我 们 还 将 看 看 可 以 修饰 超 链 接 和 水 平行 内 列表 样式 
的 混合 絮 以 及 其 他 有 用 的 排版 和 布局 模式 。 

第 5 章 展示 了 Compass 如 何 使 你 免 去 编写 跨 浏 贤 妖 的 CSS3 的 痛 亩 。 你 会 发 现 通 过 Compass 实 
现 盒 阴 影 、 边 框 圆 角 以 及 背景 靖 变 等 新 锐 样 式 是 那么 向 单 ， 而 且 还 不 需要 关心 厂商 前 绥 以 及 各 
放 咏 如 的 实现 细 市 。 我 们 将 看 看 Compass 如 何人 简化 8font-face， 其 至 通过 使 用 简单 的 CSS PIE 
整合 ， 帮 助 你 在 旧版 本 的 正中 支持 一 些 CSS3 特 性 。 

当 你 完成 这 部 分 学 习 时 ， 会 对 Compass 如 何 融 入 你 的 样式 表 工 作 流 程 以 及 帮 你 解决 日 靖 问 
题 有 一 个 很 好 的 理解 。 你 将 会 对 动态 样式 表 的 巨大 能 力 以 及 如 何 更 轻松 地 写 出 更 好 的 样式 表 有 
一 个 真切 的 感受 。 在 下 一 部 分 ， 我 们 将 看 看 Compass 的 智能 自动 化 CSS 精 灵 ， 如 何 将 样式 表 从 开 
发 上 线 到 生产 环境 ， 以 及 如 何 优化 样式 表 以 获得 更 高 性 能 。 
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本 章 内 容 

口 网 格 布局 的 基本 原理 以 及 何 时 使 用 网 格 布局 
口 使 用 Compass 时 的 CSS 网 格 布局 框架 选项 

口 使 用 排版 辅助 融 处 理 垂 直 韵 律 问 题 


3.1 网 格 布局 介绍 


留 日 在 Web 设 计 中 非常 有 用 , 但 却 第 第 被 忽略 。 留 日 就 是 你 的 布局 中 内 容 之 间 的 空 际 。 留 日 
通过 在 不 同类 型 的 信息 间 制 造 视觉 隔离 , BR SECEROSU PL VALER, 或 者 让 你 把 注意 力 集 中 到 更 重 
要 的 元 系 上 。 

网 格 布局 框 染 可 以 帮 你 在 Web 页 面 中 局 效 地 使 用 留 蝗 ， 对 行列 间 的 内 容 ， 以 及 行列 间 的 间 际 
提供 统一 的 太 寸 。 尽 管 从 印刷 机 发 明之 日 起 ， 网 格 布局 在 印刷 中 就 已 经 非 笛 次 届 了， 但 是 在 Web 
设计 中 只 流行 只 有 短 短 几 年 。 除 了 能 在 你 的 设计 中 提供 一 些 留 日 用 法 的 最 佳 实践 ，CSS 网 格 布局 
还 可 以 迅速 调整 内 容 区 域 宽度 ， 从 而 快速 构建 新 的 布局 原型 。 


3.1.1 不 使 用 CSS 网 格 布局 或 者 不 使 用 网 格 辅助 设计 


统一 的 留 日 除了 有 美学 上 的 考虑 , 还 能 玫 你 更 好 地 浏览 和 阅读 内 容 。 我 们 的 视线 会 被 页 面 中 
元 系 之 间 的 空白 吸引 ， 不 均等 的 空 昌 可 以 一 下 子 抓 住 你 的 注意 力 。 这 样 做 有 利 有 其， 有 时 太 多 焦 
点 也 会 造成 从 各 上 的 干扰 。 

同 号 在 次 卡 中 的 一 段 文本 相 比 , 写 在 模 格 纸 上 的 文本 段落 会 更 易 辨 识 。 没 有 一 个 统一 的 基线 ， 
你 的 手书 会 变 差 ， 辩 识 度 也 会 严重 降低 。 同 样 的 道理 ， 脐 离 了 网 格 的 设计 ， 留 给 你 的 将 是 不 一 臻 
的 太 二 和 随意 的 对 齐 ， 这 样 会 大 大 降低 设计 的 冲击 力 。CSS 网 格 布局 框架 建立 了 一 个 各 种 统一 太 
才 的 规范 ， 避 免 你 陷入 在 布局 中 失去 焦点 的 危险 。 接 下 来 让 我 们 看 一 个 简单 的 网 格 布局 示例 。 


3.1.2. 网 格 布局 系统 或 框架 及 其 工作 原理 
为 防 你 以 前 从 未 接触 过 网 格 布局 , 我 们 先 来 看 一 下 一 些 实 战 中 的 网 格 布 局 。 假如 你 现在 能 很 
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方便 地 上 网 ， 接 下 来 你 可 能 希望 跟着 一 步 步 在 线 操 作 。 我 们 将 看 一 看 Geoffrey Grosenbach 的 超 棒 
的 PeepCode 博 客 ( http://blog.peepcode.com/archives )， 如 图 3-1 所 示 ，PeepCode 充 分 利用 了 CSS 网 
格 布局 的 优势 。 
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看 一 下 图 3-1 





面 中 项 了 一 个 非常 棒 的 复 









无 需 计 算 玩 转 CSS 网 格 布局 


在 这 个 网 格 布局 中 一 


MY AVATAR 


3 
3892 
2 


ERYTHING 7 GILES v, ie 


Metal PEXCEDT wins 
DAR, 9E MNA MES LAMBDA 







Loo tant 17 regn. 


THAT ISA (60E S MEI 


MAKING IT SHORTER 


GETiT TIE #@*/\ 
OUT 9t HERE! 


Blog Archives 


共有 多 少 列 ? 如 果 你 说 有 4 个 ， 并 不 完全 正确 。 
要 有 4 个 大 列 ， 但 是 看 一 下 页 脚 ， 下 边 有 6 列 的 链接 。 如 果 你 按 下 Ctrl+G ， 你 会 
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如 图 3-2 所 示 ， 页 面 实 际 上 有 12 个 列 。 每 一 个 缩 略 图 大 列 由 3 个 小 列 构 成 (4x3=12 )， 而 在 页 
脚 中 的 每 个 大 列 由 两 个 小 列 构成 (6x2=12 )。 利 用 这 种 布局 方式 ， 我 们 能 够 轻松 地 以 一 种 看 上 去 
很 舒服 的 方式 排 布 图 片 , 当然 了 它 的 功能 远 不 止 于 此 。 如 果 你 一 篇 篇 翻 看 Geoffrey 存 档 中 的 文章 ， 
并 且 使 用 Ctrl+G 快 捷 键 ， 你 会 发 现 每 一 篇 都 有 类 似 的 网 格 布局 (如 网 3-3 所 示 )。 
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图 3-3 ”适用 于 文本 的 网 格 布局 


图 3-3 中 的 文章 只 有 5$ 列 宽 ， 这 个 布局 使 用 了 一 个 7 列 的 留 白 以 背景 图 的 方式 来 展示 一 张 名 片 ， 
这 张 名 片 图 用 来 文 返 文 章 中 的 内 容 。 

至 此 你 已 经 看 到 了 网 格 布局 能 够 提供 的 巨大 价值 ，Sass 和 Compass 在 这 其 中 能 起 到 什么 作用 
呢 ? 




















48 第 3 章 无 需 计 算 玩 转 CSS 网 格 布局 


3.4.3 ”使 用 Sass 和 Compass 进 行 网 格 布局 


网 格 布局 的 核心 原理 很 众 单 , 无 非 就 是 把 内 容 和 雁 需 通过 人 秒 单 的 数学 计算 进行 均 分 ,然后 分 
配 。Compass( 和 Sass ) 帮 你 处 理 这 些 计算 ， 把 你 从 通过 类 名 来 指定 网 格 宽度 的 索 杂 工作 中 解放 出 
来 。 使 用 Sass 中 的 变量 ,你 可 以 轻 多 地 配置 网 格 样 式 ， 仪 仪 修改 儿 个 变量 就 能 尝试 男 外 一 种 设 定 。 
接 下 来 ， 我们 看 看 网 格 系统 由 哪 几 部 分 构成 ， 以 及 Sass 和 Compass 如 何 帮 你 人 处理 它们 。 


3.2 ”开始 使 用 网 格 布局 

这 一 章 将 介绍 一 些 CSS 网 格 布局 的 先进 特性 。 如 果 你 对 CSS 网 格 布局 已 经 很 熟悉 了 ， 这 将 是 
一 个 复习 过 程 。 如 果 这 是 你 第 一 次 接触 CSS 网 格 布局 ， 这 章 将 帮助 你 迅速 入门 。 现 在 ， 让 我 们 定 
义 一 些 术语 。 

















3.2.1 术语 


尽管 每 种 CSS 网 格 布局 框架 都 有 一 套 它们 自己 的 关于 网 格 元 素 的 命名 , 但 是 有 些 概念 却 是 所 
有 框 染 共 至 的 ( 如 表 3-1 所 示 )。 








表 3-1 网 格 布局 框架 术语 








术语 名 E X 是 否 涉 及 HTML 标 签 
列 内 容 度 量 的 垂直 单位 fi 
fin 构成 一 个 网 格 布局 的 HTML 元 素 是 
nS 网 格 布 局 中 列 与 列 之 间 的 统一 留 日 fi 


表 3-1 中 的 术语 是 CSS 网 格 布局 的 核心 ， 正 如 你 所 见 ， 只 有 网 格 容 融 会 出 现在 你 的 标签 中 。 

1. 列 

列 是 网 格 布 局 框架 的 最 核心 部 分 。 在 印刷 界 ， 如果 内 容 为 王 ， 那么 列 就 是 隐藏 在 王座 之 后 的 
强大 力量 。 作 者 被 称 为 专栏 作家 ， 分 类 广告 以 列 和 英寸 为 单位 进行 售卖 。 在 Web 设 计 中 ， 我 们 时 
已 迈 过 了 使 用 红 、 蓝 或 粉色 链接 ， 居 中 排 布 的 落后 时 代 。 但 是 相 比 印刷 ,我们 在 好 多 方面 依然 很 
落后 。CSS 很 久之 前 就 具有 了 调整 水 平 内 容 演 染 方 式 的 能 力 ， 但 是 垂直 布局 对 其 一 直 是 个 挑战 。 
原生 文 持 基于 列 的 布局 才刚 刚 和 被 CSS 规 范 收录 ， 所 以 还 需要 很 多 年 你 才能 真正 将 其 利用 起 来 。 这 
段 真空 期 刚好 被 CSS 网 格 布局 框 染 和 基于 列 的 布局 填充 了 。 

峙 看 一 眼 图 3-2。 那 些 冬 和 直 的 阴影 条 就 是 列 。 你 会 发 现 它 们 每 个 都 有 30px 宽 ， 同 时 市 有 统一 
的 留 日 。 有 很 多 技术 可 以 在 CSS 中 实现 列 的 效 末 。 在 3.2 方 中 我 们 将 看 几 个 网 格 布局 系统 。 到 现在 
为 止 ， 请 牢记 所 有 的 CSS 网 格 布局 都 有 列 的 概念 ， 并 且 这 些 列 在 同一 容 末 内 是 等 宽 的 。 下 面 我 们 
将 探 客 一 下 容 船 。 


ra 口 口 


2. 从 前 
回顾 图 3-2 中 Blueprint 的 例子 ,你 应 该 会 有 这 样 一 个 印象 : CSS 网 格 布 局 把 整个 页 面 变 成 了 基 
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于 列 的 布局 ,很 像 一 张 报纸 。 在 Web 中 ， 用 户 的 屏幕 大 小 和 分 辩 率 是 你 不 能 控制 的 ， 所 以 你 并 不 
知道 页 面 在 用 户 那 里 实际 会 有 多 大 。, 在 CSS 网 格 布局 中 , 你 在 一 个 容器 内 构造 一 个 基于 列 的 布局 。 
一 个 网 格 布局 既 可 以 只 有 一 个 容器 也 可 以 有 多 个 容器 。 有 了 时候 ,你 或 许 会 构造 不 同 列 冤 和 列 数 的 
容器 ， 我 们 后 面 介绍 的 960 网 格 布局 系统 中 就 会 有 这 种 情况 。 在 CSS 网 格 框架 中 ， 一 个 容 絮 一 般 
说 来 就 是 一 个 封装 元 素 ， 多 数 时 候 是 一 个 DIV 给 它 指定 一 个 用 来 实现 网 格 布局 的 CSS 选 择 器 。 

现在 你 已 经 知道 CSS 网 格 布 局 都 是 通过 一 个 或 多 个 容器 来 容纳 列 的 , 接 下 来 让 我 们 看 看 网 格 
布局 的 另 一 个 关键 点 一 一 醒 。 

3. f& 

就 像 房 顶 上 的 醒 用 来 收纳 雨水 然后 将 其 从 房 顶 引流 到 排水 沟 一 样 , TEE EJ] 3641 1 FL A DOR 
注意 到 内 容 块 之 间 的 边界 。 再 次 回顾 一 下 图 3-2 中 的 例子 。 阴 影 列 之 间 的 缺口 就 是 槽 。 值 得 注意 
的 是 ， 就 像 列 一 样 ， 槽 也 是 有 统一 宽度 的 ， 在 图 3-2 中 宽度 是 10px。 不 同 的 网 格 布局 会 使 用 不 同 
的 算法 来 满足 列 式 布局 的 需要 ， 但 是 全 部 是 基于 列 数 、 列 宽 和 酸 宽 的 。 

到 目前 为 止 , 我 们 只 看 到 了 基于 像素 的 、 固 定 宽度 的 列 和 构 。 下 一 节 一 起 看 看 有 哪些 可 选 的 
网 格 布局 。 


3.2.2 是否 使 用 网 格 布局 ， 要 语义 还 是 要 实用 


任何 技术 都 不 乏 批 评 者 。CSS 网 格 布局 框架 当然 也 不 例外 。 批 评 人 土 抱 候 说 : 使 用 CSS 类 名 
来 指定 网 格 布局 是 把 展现 和 内 容 斐 合 了 。 在 这 个 语义 阵营 的 人 坚 称 , 标签 应 该 只 是 关于 内 容 和 数 
据 的 ， 不 应 该 包含 任何 关于 展现 的 信息 。 而 实用 主义 者 则 认为 能 影响 语义 的 是 标签 而 不 是 类 名 。 

地 好 ，Compass 提 供 了 两 种 选择 ， 在 不 修改 原 有 类 名 的 情况 下 ， 你 既 可 以 通过 添加 类 名 又 可 
以 通过 使 用 混合 右 来 实现 网 格 布局 。 


3.2.3 固定 的 网 格 布局 还 是 流动 的 网 格 布局 


由 于 网 络 用 户 的 屏幕 尺寸 不 一 , 设计 人 员 有 两 种 选择 : 要 么 选择 一 种 对 于 大 多 数 用 户 合理 的 
固定 布局 大 小 〈 并 且 限 制 这 种 布局 内 的 内 容 不 溢出 )， 要么 实现 一 种 灵活 的 流动 布局 ， 让 内 容 卓 
适应 用 户 的 屏 雄 ， 甚 至 当 浏 览 带 窗口 大 小 改变 时 也 会 自 适 应 。 

图 3-4 是 Stephen Bau 基 于 Nathan Smith 关 名 的 960 网 格 系 统 编 写 的 一 个 流动 网 格 布局 示例 。 在 
对 比 图 中 你 可 以 看 到 同样 的 16 列 的 网 格 布局 ， 当 用 户 的 浏览 疾 窗 口 变 大 时 ， 列 宽 也 会 扩大 。 
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16-COLUMN GRID [s 


图 3-4 960 流 动 网 格 布局 


尽管 流动 布局 听 上 去 非常 族人 毕竟， 谁 会 不 喜欢 灵活 呢 )， 但 是 动态 内 容 的 特性 (比如 图 
片 、 图 案 ) 让 流动 布局 变 得 非常 难以 实现 和 维护 。 本 昔 稍 后 讨论 960 网 格 布 局 和 其 他 系统 时 ， 会 
看 几 个 流动 的 网 格 布局 。 

到 目前 为 止 ， 我们 的 讲解 已 经 涵盖 了 CSS 网 格 框 染 的 基本 知识 点 。 下 一 市 我 们 将 深入 探讨 4 
个 流行 的 网 格 布局 系统 以 及 如 何在 Compass 中 使 用 它们 。 

















3.3 ”使 用 Blueprint 


Blueprint 最 早 是 Olav Bjerkevy 在 2007 年 开发 的 ， 现 在 由 Joshua Clayton 和 一 个 贡献 者 团队 进行 
维护 。Blueprint 把 一 些 通用 的 对 网 格 布局 、 段 沙 和 表格 进行 样式 修饰 的 CSS 技 术 打 包 到 一 个 框架 
中 ， 然 后 可 以 在 各 个 项 目 中 通用 这 个 框架 。 你 可 以 完全 使 用 Blueprint， 也 可 以 选择 Blueprint 中 你 
喜欢 的 模块 进行 日 定 义 。 大 多 数 设 计 师 在 初 识 Blueprint 时 都 是 用 它 来 做 网 格 布局 的 ， 所 以 我 们 从 
这 里 开始 吧 。 

如 你 在 3.1 方 中 看 到 的 , CSS 网 格 布局 包含 容 右 、 列 和 槽 。 很 快 你 会 看 到 , 列 和 槽 都 是 虚拟 的 ， 
这 也 就 意味 者 你 的 标签 中 不 会 出 现任 何 列 和 槽 ,你 只 知 在 标签 上 指明 当前 内 容 应 该 占据 多 少 列 宽 
以 及 每 列 之 间 的 模 宽 。 
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3.3.1 使 用 原生 CSS 的 Blueprint 


首先 你 需要 下 载 并 且 解 压缩 Blueprint 的 CSS 以 及 支持 类 的 文件 到 你 的 项 目 中 ， 并 且 在 你 文档 
的 头 部 加 以 引用 ， 如 代码 清单 3-1 所 示 。 


代码 清单 3-1 把 Blueprint 加 到 页 面 中 


«link rel 








"stylesheet" href-"css/blueprint/screen.css"'- 
«link rel="stylesheet" hrefz"css/blueprint/print.css"- 
«1!--[if lt IE 8]> 

«link rel="stylesheet" href-"css/blueprint/ie.css"- 
«'[endif]--» 


在 这 个 例子 中 , 你 为 显示 器 和 打印 媒介 都 添加 了 样式 , EEE Dg AR BEBITAR TE 9] 28 SPP S JI 
了 条 件 样式 。 这 是 一 种 厨房 水 槽 (kitchen sink ) “的 做 法 : 把 所 有 的 Blueprint 的 特性 都 包含 进来 ， 
包括 它 的 重 置 、 网 格 布 局 、 排 版 以 及 表格 文 持 。 你 可 以 选择 仅仅 引入 你 想 要 的 Blueprint 模 块 ， 但 
是 对 于 我 们 现在 的 演示 ， 这 个 例子 刚刚 好 。 在 3.3.3 节 我 们 会 看 看 如 何在 Compass 中 优化 Blueprint。 

现在 你 已 经 把 Blueprint 加 到 页 面 中 , 可 以 创建 自己 的 网 格 布局 系统 了 。 先 看 一 个 基本 的 布局 ， 
如 代码 清单 3-2 所 示 。 


代码 清单 3-2 一 个 基本 的 Blueprint 布 局 


























«section classs'container"» <0 创建 网 格 布局 

«header class="main span-24"» 

Header e 全 宽 的 头 
«/header» 
«section class-"content span-20"'» 

I e 主 内 容 区 域 
</div> 
<aside id="sidebar" class="span-4 last"> 

The last column e TW 

则 边栏 

«/aside» 侧 边 术 
«footer class-c"main span-24"» 

Footer 


«/tooter» 
«/section» 


在 上 边 的 例子 中 , 你 通过 全 宽 的 头 部 和 尾部 创建 了 一 个 简单 的 、 两 列 的 、 类 博客 样式 的 布局 。 
首先 在 把 整个 网 格 布局 包 起 来 的 元 素 上 添加 了 一 个 container 类 名 人 @ ,通过 给 header 和 footer 元 素 
设置 span-24 的 类 名 来 让 它们 占 满 网 格 布局 的 整个 宽度 ( 网 格 布局 在 这 个 例子 中 一 共 占 24 列 )@。 
由 于 你 希望 在 主要 内 容 和 侧 边 栏 中 间 有 一 个 垂直 的 区 分 ， 可 以 分 别 为 它们 设置 span-20 合 和 
span-4 的 类 名 。 注 意 ， 你 为 侧 边 栏 额外 添加 了 一 个 last 的 类 名 做， 这 个 类 名 会 去 掉 位 于 这 一 列 
的 右边 的 权 ， 因 为 这 是 行内 的 最 后 一 列 。 

我 们 没 时 间 通 阅 一 人 裔 Blueprint 的 源码 ， 但 是 在 开始 一 个 Compass 的 例子 之 前 ， 有 必要 了 解 
Blueprint CSS 的 几 点 内 容 ， 如 代码 清单 3-3 所 示 。 




















(D 这 是 一 个 谚语 , 指 无 所 不 包 ? 一 应 俱全 。 一 一 译 者 注 
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代码 清单 3-3 Blueprint 例子 中 使 用 到 的 CSS 


人 -—0 设置 网 格 布局 的 宽 
Column, 








.Span-1, 

.Span-2, 

.Span-3, 

.Span-4, 

E 9 将 列 向 左 浮动 ， 添 加 槽 
.Span-24 {float: left;margin-right:10px;} 

.last {margin-right:0;} 








.span-1 {width: 30px;} 

.Span-2 {width:70px;} 

.span-3 [width:110px;! 9 侧 边 栏 
.Span-4 [width:150px;]) 

.S8pan-20 (width:790px;]| 


.S8pan-21 [width:830px;) 
.S8pan-22 í(width:870px;]| 
.Span-23 (width:910px;] T4 &T& B9 4 v 
.Span-24 {width:950px;margin-right:0;} 























在 这 个 从 Blueprint 网 格 模 块 中 提取 出 来 的 缩减 后 的 列表 中 ,我 们 看 一 下 网 格 布局 是 如 何 实现 
的 。 US JU AH — 1T 950pxHJ 95. , Jt Hg vui pp. 接 下 来 ,通过 span-x 类 名 定义 列 宽 的 列 
全 部 向 左 浮动 ， 同 时 通过 margin-right 设 置 一 个 右 侧 的 10px 的 槽 个 。 接 下 来 ， 侧 边栏 和 主 内 容 
的 宽度 通过 span-4 全 和 span-20 人 设置 最后, 4 n headerfllfooterz- 4 MAA n] FER ss (HO. 

如 果 这 是 你 第 一 次 接触 CSS 网 格 布局 ， 你 可 以 看 到 这 里 的 计算 并 不 复杂 。Blueprint 通 过 类 名 
控制 列 宽 以 40px (30px 的 列 宽 加 上 10px 的 覃 ) 的 基数 ，1~24 的 倍率 递增 。 除 了 基本 的 span-x 类 ， 
Blueprint 还 提供 了 类 似 append- x、prepend-x、pull-x、 和 push-x 等 的 类 名 ， 用 来 控制 网 格 
布局 中 水 平方 同 列 前 、 列 后 的 填充 或 位 移 ， 为 外 也 有 类 似 的 类 用 来 添加 边框 或 者 进 和 TEUER, 
到 目前 为 止 , 我 们 已 经 探索 了 Blueprint 背 后 的 一 些 原理 和 CSS 实 现 , 让 我 们 看 看 如 何 通过 Compass 
使 应 用 Blueprint 网 格 布 局 变 得 更 加 容易 。 
































3.3.2 ”使 用 Compass 应 用 Blueprint 


到 目前 为 止 ， 你 已 经 看 到 了 如 何 通过 CSS 实 现 一 个 简单 的 布局 ， 接 下 来 让 我 们 看 看 如 何 使 用 
Compass 应 用 Blueprint。 创 建 一 个 新 的 Compass 项 目 来 开始 我 们 的 探索 ， 如 代码 清单 3-4 所 示 。 


代码 清单 3-4 ”创建 一 个 基本 的 Blueprint 项 日 


compass create simple --using blueprint/basic 





simple/ 
directory simple/images/ 
directory s 
d S 


directory 








imple/sass/ 











irectory simple/sass/partials/ 
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directory simple/stylesheets/ 

create simple/config.rb 9 以 下 为 主要 的 样式 表 
网 格 布局 create simple/sass/screen.scss 
设置 create simple/sass/partials/ base.scss 

create simple/sass/print.scssg 

create simple/sass/ie.scss 

create simple/images/grid.png 

create simple/stylesheets/ie.css 

create simple/stylesheets/print.css 

create simple/stylesheets/screen.css 














除了 基本 的 项 目 结构 ， 还 有 几 个 点 很 重要 ， 需 要 特别 注意 。 首 先 ，Compass 创 建 了 一 个 主 样 
式 文件 screen.scss， 并 引入 了 Blueprint 人 人。 接 下 来 ，Compass 创 建 了 一 个 _base 局 部 文件 ， 其 中 包 
含 了 你 网 格 布 局 的 所 有 计算 候 。 在 这 个 例子 中 ， 计 算 规 则 跟 上 面 静 态 CSS 的 例子 一 样 de 
(30+10 ) x24 的 设 定 ， 所 以 不 用 详 看 了 。 你 可 能 会 奇怪 ， 为 什么 会 使 用 plueprint/basic。 我 
们 很 快 会 看 到 ，Compass 有 很 多 种 使 用 Blueprint 的 方法 。 为 了 这 个 例子 ,我 们 先 看 看 基本 的 模式 。 
首先 ， 让 我 们 次 入 看 一 下 生成 的 Screen.scss 文 件 ， 如 代码 清单 3-$ 所 示 。 


代码 清单 3-5 ”Blueprint 基本 模式 的 默认 screen.scss 
// 这 里 引入 一 个 全 局 的 重 置 到 任何 引入 这 个 样式 表 的 地 方 

















@import "blueprint/reset"; a 默认 的 Blueprint 重 置 模块 
// 需要 配置 blueprint 的 话 ， 编 辑 partials/_base.sass 文 件 。 
Qimport "partials/base"; «—9 网 格 布局 设置 
// 引入 所 有 上 默认 的 blueprint 模 块 ， 以 便 我 们 能 使 用 这 些 模块 内 的 混合 器 。 
@import "blueprint"; 
l 让 Blueprint 的 

入 非 默 认 的 有 £3, o 

// 引入 非 默认 的 脚手架 模块 模块 可 用 


Gimport "blueprint/scaffolding"; 


// 根据 你 的 配置 生成 plueprint 框 架 。 


























Qinclude blueprint; «—O 生成 网 格 布局 
eanclude blueprint-scatffolding; 表单 和 其 他 的 

c H 人 

Blueprint 元 件 








在 生成 的 screen.scss 文 件 中 , 添加 了 Blueprint 的 reset 模 块 佑 ,从 局 部 文件 中 引入 了 网 格 设 定 
个 ， 引 入 了 Compass 中 强大 的 Blueprint 混 合 嚣 候 。 接 下 来 准备 生成 你 的 网 格 布局 合并 添加 一 些 
Blueprint 额 外 的 特性 ， 比 如 说 与 表格 修饰 相关 的 合 。 真 正 的 魔力 发 生 在 你 通过 @include 
blueprint 生 成 网 格 布局 时 。 让 我 们 通过 查看 Compass 源 代码 的 相关 行 来 了 解 一 下 这 是 如 何 发 生 
的 ， 如 代码 清单 3-6 所 示 。 


代码 清单 3-6 利用 强大 Compass 的 Blueprint 生 成 网 格 布局 


Gmixin blueprint-grid ( 











// Use these classes (or mixins) to set the width of a column. 
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@for $n from 1 to $blueprint-grid-columns { 
.span-#{Sn} ( e 生成 span-xx 类 


Qextend .column; 
width: span($n); } } 
.Span-#{Sblueprint-grid-columns} ( 


aextend .column; 
width: span($blueprint-grid-columns); ji 最 后 一 列 的 类 不 需要 槽 
margin: 0; } 


f£ CompassHJBlueprintbiSirt, — &JB1 E ass RIKE T] Dblueprint-gridlí ts. UR 
做 了 网 格 布局 中 的 大 部 分 脏 活 时 活 。 这 个 混合 右 基 于 你 在 _base.scss 局 部 文件 中 定义 的 值 处 理 你 网 
格 布局 中 的 计算 。 它 通过 遍历 列 数 生 成 你 希望 的 CSS 类 名 人 @。 如 前 面 章节 中 的 静态 CSS 例 子 ， 对 
于 最 后 一 列 的 类 人 处理 稍微 不 同 , 会 省 略 掉 列 上 的 槽 @@。 如 你 所 见 ， 你 可 以 通过 修改 base 局 部 文件 
中 的 数值 ， 得 到 一 个 全 新 的 网 格 系统 。 我 们 仪 仅 把 这 个 混合 大 拿 出 来 演示 Compass 如 何 支持 
Blueprint 的 类 ， 并 不 意味 着 你 得 了 解 它 ， 如 有 果 你 愿意 ， 你 永远 都 不 需要 同 这 类 代码 打交道 。 你 根 
本 就 无 需 考 虑 这 部 分 代码 是 如 何 实 现 的 ， 直 接应 用 Blueprint 的 类 即 可 。 但 理解 背后 的 工作 原理 能 
更 好 地 应 用 Compass。 

到 目前 为 止 ， 你 已 经 看 到 了 Compass 如 何 快速 创建 基于 类 名 的 Blueprint 网 格 布局 ， 接 下 来 让 
我 们 看 看 其 他 可 选 方法 。 
































3.3.3 ”使 用 Compass 应 用 无 需 类 名 的 Blueprint 
在 上 个 例子 中 ， 我 们 使 用 了 Compass Blueprint 的 基本 模式 : 


compass create simple --using blueprint/basic 

Compass] t3: Hc E Efl B] 26630, ARRAS XX Blueprint2S Z 4887; X, m SE (Bt [5] 
于 在 其 他 的 选择 需 中 混合 进 网 格 样式 可 以 选用 blueprint /Ssemantic: 

compass create simple --using blueprint/semantic 

如 有 果 比 较 一 下 两 种 类 型 牛 成 的 文件 ， 你 会 发 现 只 多 了 一 个 文件 ， 此 外 在 screen.scss 底 部 多 了 
一 些 额外 引入 。 


// 把 这 些 局 部 文件 合并 到 screen 样 式 文件 中 。 
@import "partials/page'"; 
@import "partials/form"; 








@import "partials/two col"; 
使 用 这 种 类 型 ，Compass 就 不 会 再 生成 那些 span-xx 类 了 。 你 只 需要 使 用 @column 混 合 器 。 
Compass 在 two_col 的 局 部 文件 中 提供 了 一 个 很 好 的 例子 ， 如 代码 清单 3-7 所 示 。 


代码 清单 3-7 ”使 用 Compass 默 认 的 两 列 Blueprint 布 局 





#container { 设置 网 格 
Qinclude container; ) 布局 容器 全 宽 的 头 部 
header, &footer ( T 和 尾部 
einclude column(S$blueprint-grid-columns); ) 


sidebar í( 
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// One third of the grid columns, rounding down. With 24 cols, 
// this is 8. 


Ssidebar-columns: floor($blueprint-grid-columns / 3); 
Ginclude columníS$Ssidebar-columns); ) 
侧 边 栏 使 用 近 


#content { 
// Two thirds of the grid columns, rounding up. (44/385 39 
// With 24 cols, this is 16. 
$Scontent-columns: ceil(2 * S$Sblueprint-grid-columns / 3); 
// true means it's the last column in the row 
8include columní($content-columns, true); } } 


这 个 清单 中 的 内 容 虽 然 很 短 ， 但 却 足 以 充分 演示 让 网 格 布局 更 快 的 Compass 技 术 (尤其 当 你 
重 构 时 ), 为 了 设置 整体 的 网 格 , 你 需要 一 个 容 带 ,例子 中 ,你 把 相应 的 行为 整合 进 了 #container 
选择 带 傅 。 你 的 头 尾 元 素 也 以 相同 的 方式 通过 一 个 混合 右 设 置 成 了 全 宽 @。 代码 中 最 神奇 的 部 分 
是 ，Compass 基 于 侧 边 栏 和 主 内 容 分 别 占 1/3、2/3， 计 算出 了 侧 边 栏 和 主 内 容 应 该 占据 的 单元 列 
的 个 数 合 ,通过 fl1oor 和 cei1 方 法 , 你 可 以 进行 一 些 基 本 的 舍 人 以 确保 恰当 的 分 配 。 如 果 你 需要 
再 次 改变 你 的 _base.scss 局 部 文件 中 网 格 布局 的 列 数 ,这 些 代 码 根 本 不 需要 修改 ,依然 能 正常 工作 。 

到 目前 为 止 ， 我 们 通过 示例 驱动 的 方式 学 习 了 Compass 中 的 Blueprint 网 格 布局 。 接 下 来 探索 
一 些 Compass 中 其 他 可 以 应 用 的 闭 名 CSS 网 格 框 架 。 来 看 一 下 960 网 格 系 统 。 


3.4 ”使 用 960 网 格 布局 系统 


另 一 个 著名 的 CSS 网 格 框架 是 Nathan Smith 的 960 网 格 系统 ( 如 图 3-5 所 示 )。 这 个 框架 的 优点 
在 于 灵活 性 。 它 的 960px 的 宽 设 定 非 常 适合 已 经 流行 很 久 的 1024px 宽 的 屏幕 ，960px 又 被 分 成 了 2、 
3. 4. 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 
240、320 和 480 等 子 值 。 

960 网 格 系统 的 工作 原理 跟 我 们 之 前 探讨 的 Blueprint CSS 框 架 的 大 部 分 原理 都 是 相同 的 , 
除了 几 个 关键 的 点 。 首 先 ，960 网 格 系统 中 的 权 在 单元 列 的 两 边 都 有 ， 这 就 意味 着 无 论 是 第 一 
列 还 是 最 后 一 列 在 它们 的 外 边框 上 都 有 一 个 柳 。 其 次 ，960 网 格 系 统 可 以 指定 容 带 的 范围 ， 这 
样 在 同一 页 中 就 可 以 有 不 同 的 列 数 和 列 宽 。960 网 格 系统 共有 12 分 、16 分 和 24 分 三 种 规范 ， 如 
图 3-6 所 示 。 
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K|3-5 ”960 网 格 系统 


12 列 网 格 




















16 列 网 格 





























图 3-6 960 网 格 系统 的 例子 
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知道 了 这 些 ， 让 我 们 重 温 一 下 3.3 节 的 例子 。 
3.4.1 一 个 基本 的 960 布局 
像 前 面 革 市 把 Blueprint CSS 加 入 到 页 面 中 一 样 , 我 们 首先 要 把 960 的 相关 文件 加 入 到 页 面 中 : 


«link rel-"stylesheet" href-"css/reset.css" /> 
<link rel="stylesheet" href="css/text.css" /> 
<link rel="stylesheet" href="css/960.css" /> 


SATA TUS P. MUIE E EARR R, CAERE E, ALAA 
认 使 用 12 列 或 者 16 列 布局 的 网 格 系统 文件 ， 如 代码 清单 3-8 所 示 。 


代码 清单 3-8 ”一 个 基本 的 960 网 格 系统 的 12 列 布局 














«section class-s"container, 12"> 0 创建 一 个 网 格 布局 

«header class-"grid 12"> 
Header e 全 宽 的 头 

«/header- 

«section clagses"content grid, 10"» — 主 内 容 区 域 
Content 

</div> 

«aside id-"sidebar" class-"grid 2"> -0 侧 边 栏 
The last column 

«/aside» 

«footer class-"grid, 12"- 
Footer 


«/tooter» 
«/section» 


注意 ，960 网 格 系统 中 标签 的 写法 跟 Blueprint 示 例 非 常 相 似 。 只 是 container 变 成 了 
container 12 Q, span-x 类 变 成 了 grig_x 9. 9. O. 机 敏 的 读者 会 发 现 侧 边栏 不 需要 last 
类 来 指明 是 位 于 一 行 的 最 后 。 这 是 因为 960 网 格 系 统 中 所 有 列 两 边 都 有 权 ， 所 以 就 没 必要 了。960 
中 有 一 个 omega 类 , 它 的 作用 跟 Blueprint 中 1ast 类 很 相似 , 但 是 这 个 只 用 在 你 强制 网 格 布 局 中 的 
内 容 新 起 一 行 的 时 候 。 

你 可 以 轻易 地 把 你 的 布局 改 成 24 列 。 首 先 你 需要 引入 24 列 的 网 格 系统 文件 : 


«link rel 














"stylesheet" href-"css/reset.css" /> 
"stylesheet" hret-"css/text.css" /> 
"stylesheet" href="css/960_24_col.css" /> 


把 上 边 960.css 的 引用 改 成 960_ 24 colcss。 只 要 换 用 了 正确 的 网 格 系统 文件 , 你 可 以 把 你 的 标 
签 也 改 成 24 列 版 本 的 了 ， 如 代码 清单 3-9 所 示 。 


代码 清单 3-9 ”一 个 基本 的 960 网 格 系统 的 24 列 布局 


«link rel 




















<link rel 





<section class="wrapper container_24"> 0 创建 一 个 网 格 布局 
<header class="main grid 24"> 
Header p 全 宽 的 头 
«/header» 
«section class-"content grid 20"> —9 主 内 容 区 域 


Content 
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</div> 

«aside id="sidebar" class="grid_4"> 0 侧 边 栏 
The last column 

«/aside» 


«footer class-s"main grid 24"> 
Footer 
«/footer» 
«/section- 


如 预期 的 那样 ， 你 调整 容器 信和 列 @、 合 、 人 @ 以 适应 比例 上 的 改变 。 尽 管 这 对 于 那些 以 前 就 
用 过 960 网 格 系统 的 人 来 说 非 稼 容易， 但 是 在 我 们 介绍 使 用 Compass 应 用 960 网 格 系统 之 前 了 解 一 
下 这 些 网 格 选 项 是 非 第 重要 的 。 接 下 来 一 市 将 展示 在 Compass 中 应 用 960 网 格 系统 的 强大 威力 。 


3.4.2 ”在 Compass 中 使 用 960 网 格 布局 


对 960 网 格 系统 的 文 持 并 没有 绑 定 在 Compass 内 ， 所 以 首先 你 需要 安装 Compass 搬 件 。 回 顾 一 
下 第 3 草 ， 我 们 可 以 通过 Ruby 的 Gems 安 装 : 


gem install compass-960-plugin 


现在 准备 创建 你 的 Compass 项 目 吧 ， 如 代码 清单 3-10 所 示 。 
代码 清单 3-10 ”生成 一 个 新 960 网 格 系统 的 Compass 项 目 


compass create -r ninesixty twelve col --using 960 引入 相应 插件 ， 


eue d twelve col/ 应 用 960 类 型 
directory twelve col/sass/ 
directory twelve col/stylesheets/ 


create twelve col/config.rb 


create twelve col/sass/grid.scss O 网 格 布局 设 定 


Create twelve col/sass/text.scss 


create twelve col/stylesheets/grid.css 


create twelve col/stylesheets/text.css 


当 你 使 用 Compass 生 成 一 个 新 的 960 网 格 系统 项 目 时 , 你 需要 引入 相应 的 插件 全 ,同时 应 用 相 
关 的 类 型 ， 以 告诉 Compass 使 用 何 种 模板 生成 。 默 认 情 况 下 ， 这 个 插件 创建 两 个 样式 表 ， 其 中 之 
一 是 伴随 960 的 网 格 设置 @ 和 基本 段落 模块 。 一 般 的 做 法 是 把 它们 转换 成 局 部 文件 ， 在 一 个 
screen.scss 样 式 文件 中 引用 它们 以 减少 网 络 请 求人 负载 。 为 了 这 个 例子 的 演示 ， 让 我 们 来 看 一 下 
Compass 都 为 你 生成 了 哪些 网 格 设置 ， 如 代码 清单 3-11 所 示 。 


代码 清单 3-11 Compass 生 成 的 960 网 格 系统 布局 默认 的 网 格 设 置 


Blmport "compass/reset"; 
Qimport "960/grid"; 
























































// 下 边 的 代码 生成 由 960 网 格 系统 提 供 的 默认 网 格 布局 


.container 12 1 
@include grid-system(12); ] 6 设 定 12 列 的 网 格 类 
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.Container 16 { 


Qinclude grid-systemí16); ) è 设 定 16 列 的 网 格 类 


// 但 是 大 多 数 compass 用 户 倾向 于 像 下 边 这 样 构造 语义 化 的 布局 
// ( 头 尾 部 占用 两 倍 宽 ) 


$ninesixty-columns: 24; a 
6 设置 混合 器 中 会 用 到 的 
.two-column í( 恋 量 为 2471 


@include grid-container; 
#header, #footer { 

@include grid(24); ) 
sidebar { 

Qinclude grid(8); } 
*tmain-content { 

QGinclude gridí(16); } ) 


重新 回忆 一 下 3.2.2 节 中 要 语义 还 是 要 实用 的 争论 。 默认 情况 下 ,960 网 格 系统 的 Compass 插 件 
支持 3 种 规格 的 网 格 布局 。 它 包含 了 基于 类 名 的 12 和 16 列 的 网 格 布局 @、 全 以 及 基于 混合 需 的 
(语义 的 ) 24 列 的 网 格 布 局 。 这 就 意味 着 你 可 以 随意 选择 ， 要 么 使 用 类 名 ， 要 么 使 用 混合 需 为 
你 已 有 的 选择 需 添 加 网 格 样式 。 让 我 们 修改 一 下 这 个 样式 表 来 适应 我 们 的 标签 ， 如 代码 清单 3-12 
所 示 。 


代码 清单 3-12 ”修改 960 以 适应 我 们 的 简单 网 格 布局 


Gimport "compass/reset"; 
aáimport "960/grid": 


// 下 边 的 代码 生成 由 960 网 格 系 统 中 css 提 供 的 默认 网 格 布局 
.container 12 ( T" 移 除 16 列 网 格 ， 你 不 需要 它 


@include grid-system(12); } 











// 但 是 大 多 数 compass 用 户 倾向 于 像 下 边 这 样 构 造 语义 化 的 布局 
// ( 头 尾 部 占用 两 倍 宽 ) 


$ninesixty-columns: 24; 9 设置 24 列 网 格 


.wrapper { 
Qinclude grid-container; 
header.main, footer.main { 
Qinclude grid(24); ) 
sidebar ( 
Qinclude grid(4); ) 
.content í( 
Qinclude grid(20); ) ) 


为 了 符合 我 们 的 要 求 ， 把 16 列 的 版 本 移 除 掉 ， 因 为 我 们 并 不 需要 全。 由 于 12 列 格子 不 满足 我 
们 的 需求 ， 所 以 我 们 把 格子 设置 成 24 列 人 @。 假如 你 倾向 于 使 用 类 名 来 调用 24 列 的 版 本 ,你 可 以 添 
加 一 个 对 grigq-system 混 合作 的 调用 .: 


.Container 24 { 
Ginclude grid-system(24); } 
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简单 却 强 有 力 。 知 你 想 了 解 更 多 关于 Compass 960 网 格 系统 插件 的 用 法 和 特性 ， 可 以 访问 项 
日 的 源 代码 ， 位 于 GitHub 上 : https://github.com/chriseppstein/compass-960-plugin。 

到 目前 为 止 , 我 们 关于 网 格 布局 框架 的 讨论 都 集中 在 网 格 中 内 容 的 和 王 耻 排 布 上 。 你 已 经 知道 
了 如 何 使 用 容器 设置 一 个 网 格 布 局 。 我 们 也 看 到 了 如 何 通 过 CSS 类 名 或 者 Sass 混 合 器 来 轻松 地 在 
网 格 布局 中 排 布 内 容 ; 探索 了 如 何 下载 Compass 的 插件 以 提供 更 多 的 网 格 布局 文 持 。 下 一 节 将 看 
看 一 个 经 党 被 伟大 网 格 设计 所 忽视 的 问题 一 一 段 沙 王 是 前 律 。 


3.5 通过 Compass Alg3& E ES fi 


在 前 一 方 ， 34188] f CSSPUR AG eg IMRT SS BITS Elie EE RIVIERA ER. YEAH RH 
Xxx HL, FEA T ovp URBE E. EUSTAN RAA. 我们 提 到 的 内 容 往 
往 指 文本 , [Hie eAd58 AL Er. WI, KARIEI PBUTERERAUSUZR « UR dE d Jap x8 
HS REESE TRUE HEAR EARIZER, — 3E RS IER Re ZEE & 354€, 来 用 均匀 的 
JKE EI [Hae EG) Eo SIE EE AEE? 我 们 回 到 这 一 章 开 头 的 PeepCode 博 客 , 如 图 3-7 
HIZR o 

注意 ,尽管 标题 内 容 、 代 但 列表 以 及 引述 的 大 小 不 同 , 但 是 它们 都 在 水 平 格子 线 上 排 布 得 很 
好 。 如 果 你 把 页 面 与 一 张 乐谱 相对 比 ,， 会 发 现 网 格 布局 的 线 很 像 节 拍 线 。 主 体 文本 内 容 沿 者 市 折 
线形 成 一 个 前 律 。 标 题 内 容 、 图 片 、 表 格 以 及 其 他 的 块 元 素 既 可 以 位 于 节拍 线 的 上 面 ， 又 可 以 位 
于 下 面 ， 甚 至 是 后 面 ， 但 是 主体 文本 内 容 不 能 偏离 页 面 韵律 。 那 么 ， 如 何 实现 这 种 效果 呢 ? 

首先 你 需要 设置 行 高 或 者 说 主体 文本 之 间 的 行 间 距 , 行 间距 是 你 的 文本 连续 基线 之 间 的 距离 
或 者 说 是 你 的 垂直 前 律 ,， 再 或 者 说 是 你 在 页 面 中 添 加 的 水 平 留 日 的 单元 。 这 就 意味 者 所 有 元 条 的 
高 ( 即 字 体 大 小 、 行 高 、 上 下 内 间距 以 及 上 下 外 间距 的 值 综合 起 来 ) 应 该 是 这 个 基本 单元 的 倍数 。 
接 下 来 几 节 将 构建 一 个 布局 并 在 其 中 应 用 垂直 韵律 。 我 们 演示 每 一 步 中 需要 用 到 的 CSS， 以 及 在 
更 短 时 间 内 实现 相同 效果 的 Compass 的 快捷 做 法 。 
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Older & ^ Newer 


The Expert Javascript Programmer 


Javascript. He was an independent advocate for Javascript 
back when most programmers hated it. He was responsible 
for making JSON a standard for data interchange, even 
between completely different languages. 


There are some classic essays in there and it only took a few 
hours to read all the articles on the front page. You can forgo 
the 90's web design style by using the Readability 
bookmarklet either on the desktop or mobile'. 


lusestyle: novel, size: large, margin: narrow. 


The Elements of JavaScript Style 
Douglas Crockford 
The Department of Style 
2005-09-19 


Programming is difficult. At its core, it is about managing 
complexity. Computer programs are the most complex things that 
humans make. Quality is a illusive and elusive. 


Good architecture is necessary to give programs enough structure 
to be able to grow large without collapsing into a puddle of 
confusion, but the ways in which we express the details of a 
program are equally important. A program's true nature can be 
concealed by sloppy coding, Only when the presentation of a 
program is clear can we have any hope of reasoning correctly about 
its efficiency, or security, or correctness. 


If you don't use Javascript, you'll learn some valuable lessons 
from a skilled programmer and tech visionary. If you do use 
Javascript, you'll learn a lot about how an enthusiast uses the 
features and shortcomings of the language to their best 
effect. 


His opinionated decisiveness and surly delivery produce 
some real chestnuts. 


Avoid conventions 

that demonstrate 

a lack of competence. 
- Douglas Crockford 


It helps to periodically remind oneself of these clear truths. 


At least one other clear truth emerged while reading. It 
surprised me that many of his style recommendations were 
precautions against elementary programming mistakes. For 
example, he recommends that Javascript programmers 
always use brackets with an if statement even if the body 
consists of only a single statement. 


门 itjs 
// Possible error 
if (a -2- b) 
c =d; 
f; 


// Recommended 
if (a b) i 
c =d; 


) 
e = f; 
| don't think l've ever accidentally misused a one-line if 


statement. A grizzled verteran like Crockford would certainly 
never make that mistake either. 


The highest sounds are hardest to hear. 
Going forward is a way to retreat. 
Great talent shows itself late in life. 
Even a perfect program still has bugs. 

- The Tao of Programming 


My epiphany was recognizing the contrast between two 
ways of approaching a programming session. One says “l'm 
experienced and | can trust myself to write flawless code." 
The other says "I'm likely to make a mistake at some point 
and will take precautions against errors." 


Novices in many fields look at experts and rightly observe 
that experts don't use the same training wheels that novices 
do. The (erroneous) conclusion is that experts don't need 
any. 


But in reality, experts often use more aids than novices. The 
skilled craftsman doesn't see these as insults to one's 
intelligence but as a tool for achieving perfection. 


Skilled woodworkers build a jig before cutting a piece of 
wood. 


[3-7 PeepCode 博 客 的 垂直 前 律 
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3.5.1 确定 基线 
像 上 一 方 中 提 到 的 那样 , 我们 首先 统一 一 下 , 为 主体 文本 选择 一 个 易 读 的 基本 字号 和 默认 的 





TTIRIo 
body { 
font-family: 'Helvetica Neue', sans-serif; 
font-size: 16px: 
line-height: 24px; 
j 


通过 一 个 简单 的 CSS 重 置 , 这 一 小 段 CSS 初 始 化 了 一 个 看 上 去 很 不 错 的 1.5em 的 基线 , 如 图 3-8 
所 示 O 


H1 headline, this is very important 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 

H2 headline, this is important 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 

H3 subhead 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 

H4 subhead 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 

H5 subhead 

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 





图 3-8 ”简单 的 垂直 韵律 示例 


为 了 证 你 诚实 ,我 们 在 页 面 背景 上 使 用 一 个 重复 的 图 片 ， 和 基线 一 样 高 ， 也 是 24px。 现 在 让 
我 们 继续 开发 你 的 设计 。 你 需要 在 标题 内 容 和 主体 内 容 上 添加 大 小 对 比 。 证 我 们 为 <h1> 到 <h5> 
的 标题 内 容 确定 段 洲 比 例 的 大 小 ， 如 代码 清单 3-13 所 未 。 


代码 清单 3-13 ”设置 行 高 
hl [font-size: 48px;) 
h2 (font-size: 36px;) 
h3 (font-size: 24px;] 
h4 (font-size: 20px;) 
h5 [font-size: 18px;) 
hi,b2,h3,h4,h5 (line-height: 1.5em;) 0 
p (margin: 1.5em 0;} 
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如 图 3-9 所 示 , 你 已 经 为 标题 内 容 设 定 一 个 合适 的 高 度 人 @, 并 且 在 标题 和 段落 之 间 添 加 了 留 白 。 


H1 headline, this is very important 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 


H2 headline, this is important 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 


H3 subhead 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 


H4 subhead 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 


LIC Ael AH 





图 3-9 ”设置 段落 的 比例 


如 你 在 图 中 所 见 , 对 标题 内 容 已 经 有 了 一 个 很 好 的 排 布 , 但 是 你 的 主体 文本 并 没有 与 你 预期 
的 垂直 韵律 同步 。 为 了 修复 这 个 问题 ， 需 要 让 标题 内 容 和 其 他 元 素 的 高 是 你 的 基线 的 整数 倍 。 在 
本 例 中 , 这 意味 着 标题 内 容 的 字体 大 小 、 行 高 、 垂 直 外 间距 以 及 垂直 内 间 曝 全 部 综合 起 来 应 该 是 
你 的 基线 单元 24px 的 整数 倍 。 调整 一 下 你 的 标题 内 容 样 式 然后 回 到 韵律 上 来 。 调整 行 高 以 适应 不 
同 的 字体 大 小 使 其 始终 保持 在 基线 上 的 公式 是 : 

'bssed sse uui Sontesise e ire desse 

为 你 的 <n1> 元 素 的 设 定 已 经 是 基线 的 整数 倍 了 ， 我 们 拿 例 子 中 的 <n2> 来 演示 。 计 算 应 该 
如 下 : 











(24px / 36px) = .6666667 em 


十- 


hl {font-size: 48px; line-height: 1.5em] 

h2 [font-size: 36px; line-height: .666667emj 
h3 {font-size: 24px; line-height: lem] 

h4 {font-size: 20px; line-height: 1.2em} 

hs {font-size: 18px; line-height: 1.33333em} 


p (margin: 1.5em 0} 
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H1 headline, this is very important 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 


H2 headline, this is important 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 


H3 subhead 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 


H4 subhead 


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
est laborum. 


H5 subhead 


| aram imeiim Analar oit amat mmmeoemmtetiunehimieimimmeait een Aa niama tee mme imemieieiumt it leben at eleme manna alimin 11 anim ^H minim 


图 3-10 ”垂直 韵律 的 版 式 规模 


如 你 所 见 ， 主体 文本 也 重新 回 到 了 基线 上 。 现 在 这 对 你 来 说 计算 应 该 不 难 , 但 是 计算 始终 得 
算 , 为 什么 不 让 电脑 帮 你 做 这 部 分 繁重 的 工作 呢 ? 它 可 以 把 你 从 计算 每 一 个 元 素 的 行 高 中 解放 出 
来 , 同时 也 允许 你 试验 不 同 的 字体 大 小 , 让 样式 表 根 据 你 的 修改 而 调整 。 现 在 看 看 如 何 用 Compass 
实现 这 样 的 样式 ， 如 代码 清单 3-14 所 示 。 


代码 清单 3-14 ”使 用 Compass 处 理 垂 直 韵 律 




















QGimport "compass/typography"; 0 引入 段落 模块 
Sbase-font-size: 16px; 
Sbase-line-height: 24px; p T" —— 
H /小 

Qinclude establish-baseline; 声明 字体 入 4 
body { 

font-family: 'Helvetica Neue', sans-serif; 

Qinclude debug-vertical-alignmentí("../images/debug.png"); 
} 


hl {@include adjust-fon 引入 调试 混合 器 


Ss 


-size-to(í(48px 
h2 {@include adjust-font-size-to(36px 


» ( K 
t ( 13 
h3 [(8include adjust-font-size-to(í24px)] 
h4 {@include adjust-font-size-to(20px)]) 
h5 {@include adjust-font-size-to(í18px)] 


p (margin: 1.5em 0;j 
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Compass Sz M A 3€ ET 755 | A Compass] EET. Hz Poe BH AE FARMER T A 
au. Compass 通 过 一 个 混合 需 为 页 面 添加 网 格调 试图 He. 最 后 通过 调用 adjust-font- 
size-to 混 合 天 来 设置 字体 和 行 高 。Compass 使 用 跟 本 节 前 面 提 到 的 计算 方法 相同 的 公式 。 这 个 
例子 真正 的 优势 在 于 灵活 性 。 现 在 你 可 以 试验 任意 的 基本 字体 大 小 、 基 本 行 高 或 者 元 素 字 体 大 小 ， 
正确 的 结 末 会 在 编译 时 计算 出 来 。 现 在 你 已 经 看 了 一 个 构建 基线 的 简单 示例 , 我 们 再 看 看 当 你 需 
HHT, CompasstéfBEti n] ELS VASE ES A KIRIA HUI o 

















3.5.2 Bi ELE HAA 





Compass 的 establish-baseline 和 aqdjust-font-size-to 混 合 需 很 容易 让 你 的 文本 位 
于 一 个 垂 生 竟 律 上 。 但 是 当 你 需要 沃 加 视 外 留 晶 时， 如 何在 不 重新 计算 的 前 提 下 保持 前 律 呢 ? 3E 
好 ，Compass 也 为 这 样 的 场景 提供 了 辅助 硕 。 计 我 们 看 看 之 前 CSS 例 子 中 的 段落 样式 : 

p (margin: 1.5em 0;) 

你 通过 上 下 外 间距 使 段落 相互 分 开 一 些 , 让 浏览 页 面 变 得 简单 。 如 有 果 你 想 对 一 个 很 重要 的 标 
题 内 容 做 同样 的 事 呢 ? 

h2.important {margin: 1.5emj 

问题 在 于 ,除非 这 个 元 素 的 字号 恰好 是 你 的 基线 韵律 的 整数 倍 , 否则 当 你 的 主体 文本 偏离 部 
律 时 ， 你 会 在 设计 中 遇 到 一 些 不 和 谐音 符 。Compass 提 供 了 一 些 辅助 器 来 给 你 的 元 素 添加 前 置 和 
后 置 留 白 以 维持 你 的 韵律 。 你 可 以 按照 这 种 方法 处 理 先 前 的 任何 一 个 元 素 : 


p {@include leader; @include trailer;} 
h2.important {@include leader(2); @include trailer(2)]] 


leader 混 合 絮 在 元 素 前 加 一 个 基线 单位 的 外 间距 ， 类 似 地 ，trailer 混 合 右 在 元 素 的 后 边 
加 一 个 基线 单位 的 外 间距 。 需 要 更 多 ? 你 可 以 给 混合 需 传 递 你 期 望 的 基线 单元 个 数 作为 参数 。 如 
果 你 希望 用 内 间距 代 蔡 外 间距 ，Compass 也 提供 了 人 padding-leader 和 padding-trailer 这 两 
个 变种 混合 器 ， 它 们 使 用 内 间距 而 不 是 外 间距 添加 留 日 。 
























































3.6 £i 


在 这 一 章 ， 我 们 看 了 流行 的 CSS 网 格 框架 如 何 简 化 维护 留 白 和 快速 构建 原型 设计 。 通 过 人 简单 
添 加 一 些 CSS 类 ， 你 就 能 创建 彼此 之 间 有 统一 间距 的 竖 列 内 容 。 你 也 看 到 了 相 比 单纯 使 用 静态 
CSS，Compass 如 何 进 一 步 简 化 使 用 和 创建 网 格 框 架 。 最 后 , 你 学 习 了 如 何 使 用 Compass 的 段落 模 
块 中 的 韵律 辅助 训 来 管理 页 面 中 的 行 间 距 等 留 日 。 下 一 革 将 深入 探索 其 他 Compass 辅 助 名 ， 利 用 
它们 能 快速 完成 CSS 稼 见 的 枯燥 乏味 的 工作 。 

















Compass 4s Bh ee 





本 章 内 容 

口 tH Compass E EN Vi eA TAFE XV 

口 MHEAR HERA Compass B gF 

a 使 用 Compass 创 建 粘 小 的 页 脚 、 多 样 化 的 表格 以 及 浮动 





我 们 已 经 对 Sass 语 法 有 了 初步 了 解 ， 也 知道 Compass 什 么 时 候 能 派 上 有 用场 ， 现 在 让 我 们 百 尺 
竺 头 更 进一步 。 这 一 曹 将 介绍 一 些 你 每 天 都 会 遇 到 、 很 简单 、 很 稼 见 〈 也 很 无 聊 ) 的 任务 ， 看 看 
怎么 通过 Compass 下 省 目 己 的 时 间 和 精力 ， 同 时 汲取 社区 智囊 。 如 采 你 还 在 手写 CSS， 没 有 把 思 
维 方式 转换 为 编写 动态 样式 表 , 那么 你 一 定 体会 得 到 , 有 些 样式 表 工 作 做 起 来 像 被 千 刀 万 则 了 一 
样 难受 。 比 如 重 置 CSS 样 式 ， 把 列表 元 素 改 成 水 平 导 航 ， 设 置 链接 的 颜色 ， 把 主 标题 文字 换 成 一 
SKK Hr SR, 这 些 任务 在 每 个 项 目 里 都 被 重复 了 无 数 次 。 而 本 草 会 展示 一 些 Compass 提 供 的 辅助 硕 ， 
让 这 些 工 作 更 快 、 更 方便 、 更 适用 。 


4.1 一 张 更 好 的 日 纸 源 目 有 针对 性 的 梓 却 重 置 


在 第 1 人 草 里 ， 我们 看 过 了 CSS 样 式 重 置 以 及 如 何在 Compass 项 目 里 仅仅 靠 添 加 @import 
"compass/reset" 即 可 引入 Eric Meyer 的 样式 重 置 v2.0。 即 便 这 很 方便 ， 有 时 全 局 样式 重 置 的 量 
级 还 是 显得 略 重 。 竺 好 ，Compass 提 供 了 更 多 粒度 的 方案 。 选 择 的 关键 在 于 你 需要 全 局 样式 重 置 ， 
还 是 只 需要 有 针对 性 的 重 置 。 


4.1.1 全 局 样式 重 置 


如 果 你 之 前 已 经 使 用 过 CSS 样 式 重 置 ， 那 可 能 是 一 个 全 局 的 样式 重 置 ， 它 利用 刀 耕 火种 似 的 
手段 去 除 浏览 硕 固 有 的 HIML 元 素 样式 。 它 的 流行 是 因为 可 以 给 Web 应 用 程序 造 出 一 张 绝 对 一 致 
的 日 纸 。 当 你 构建 一 个 传统 的 Web 应 用 程序 时 ， 如 果 你 需要 支持 很 多 浏览 带 ， 甚 至 包括 低 版 本 的 
Internet Explorer， 那 么 一 个 全 局 的 样式 重 置 是 非常 给 力 的 。Compass 基 于 Eric Meyer 的 经 典 方案 ， 
提供 了 一 个 全 局 的 样式 重 置 ， 并 恰如其分 地 命名 为 global-reset。 而 当 使 用 global-reset 
之 前 ， 你 有 必要 理解 其 内 部 的 混合 胡 ， 它 们 其 实 跟 Compass 的 任何 混合 大 都 是 一 样 的 ， 如 代码 清 
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单 4-1 所 示 。 
代码 清单 4-1 Compass 中 的 global-reset 
@mixin EPE E { | | 定义 全 局 

html, body, div, span, applet, object, iframe, 样式 重 置 

HL, HZ; h3, h4, h5, h6, p, DloORQUuOLOe, pre, 

a, abbr, acronym, address, big, cite, code, 

del, dfn, em, img, ins, kbd, q, s, samp, 

small, strike, strong, sub, sup, tt, var, 

b, u, i, center, 

EL. E. dO dX. ül; Um. 

fieldset, form, label, legend, 

table, caption, tbody, tfoot, thead, tr, th, td, 

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary, 

time, mark, audio, video { 包含 个 别 
à1nclude reset-box-modsel; 的 混合 器 
Ginclude reset-font; j 

body { 
Ginclude reset-body; j 

ol, ul x 
@include reset-list-style; } 

table { 
@include reset-table; } 








caption, th, td { 

Ginclude reset-table-cell; } 
q, blockquote { 

@include reset-quotation; j 
a img { 

Qinclude reset-image-anchor-border; } 











Ginclude reset-html5; j 
TA, global-reset HjiÉ— MENEMA TETERE AAE, pU (通过 Sass 
的 eincludqe 引 入 的 ) 混合 硕 不 仅 致力 于 解决 浏览 硕 在 盒 模型 、 排 版 、 列 表 样 式 、 表 格 样式 等 诸 
多 方面 的 不 一 致 问题 ， 还 为 新 的 HTML5 元 素 添 加 了 默认 样式 。 我 们 会 在 下 一 节 看 到 这 些 特 丈 的 
ERAT, [HÆK Xglobal-reset HATE ZAT, — F, Compass 的 样式 重 置 仪 
需要 导 八 compass/reset,， 这 意味 着 什么 呢 ? 为 了 搞 清楚 这 = 来 看 -看 compass/reset 的 
源 代 码 : 


Qimport "reset/utilities"; 




















Ginclude global-reset; 


原来 如 此 ， 只 有 两 行 。 多 Re reset 混 合 磊 里 面 的 混合 紫 剖 可 用 。 
二 行 @include 引 入 了 这 个 全 局 样式 重 置 。 下 一 方 ， 我 们 来 看 一 看 在 没有 这 a 
况 下 ， 如 何 实现 有 针对 性 的 样式 重 置 。 





68 $43 A Compass 就 不 再 枯燥 


4.1.2. ”通过 有 针对 性 的 样式 重 置 进 行 更 多 控制 


假设 你 有 一 个 移动 端的 界面 , 那么 全 局 的 样式 重 置 其 实 会 给 它 审 来 不 必要 的 负担 。 可 能 你 的 
页 面 并 没有 用 到 <table>、<blockquote> 或 列表 。 因 为 页 面 的 负担 是 很 关键 的 ,样式 表 瘦 号 市 
给 移动 应 用 用 户 体 验 的 影响 比 蝎 面 端 更 加 明显 。 如 果 你 用 普通 的 方式 写 CSS， 你 可 能 会 收藏 一 段 
全 局 样式 重 置 的 代码 片段 ,然后 把 它 用 在 一 个 个 项 目 之 中 。 如 条 你 只 想 在 新 项 目 中 用 一 部 分 , 那 
就 震 要 把 它 摘 到 一 个 文本 编辑 可 里 ， 再 去 抒 你 不 需要 的 部 分 。 比 这 个 更 进一步 的 方式 是 使 用 
Qimport "compass/reset/utilities", 而 不 必 使 用 全 局 样式 重 置 。 让 我 们 看 几 个 上 一 节 中 
出 现 的 组 成 全 局 样式 重 置 的 混合 硕 。 

1. 高 瞻 远 瞩 的 HTML5 样 式 重 置 

HTML5 的 一 个 令 人 兴奋 的 新 特性 ， 就 是 它 引 入 了 新 的 标记 。 你 可 以 在 适当 的 地 方 把 一 些 
<div> 换 成 <header>、<footer> 以 及 <nav> 等 更 霹 义 化 的 标记 。 可 展 ， 在 如 何 对 符 这 些 新 标记 
的 问题 上 ,浏览 硕 之 间 没 有 完全 达成 一 致 。 设 想 一 下 , 你 需要 列 出 每 个 新 标记 并 逐个 应 用 aisplay: 
block。 你 可 以 把 这 个 列表 背 下 来 ,其 至 可 以 存 一 段 代码 然后 不 断 地 复 用 ,而 如 果 你 使 用 Compass， 
那 只 使 用 reset-htm15 混 合 逢 就 可 以 快速 完成 这 项 工作 。 我 们 来 看 一 看 Compass 的 
reset-htm15 混 合 希 ， 如 代码 清单 4-2 所 示 。 


代码 清单 4-2 HTML5 样 式 重 置 
Qmixin reset-html5 { 
article, aside, details, figcaption, figure, 















































footer, header, hgroup, menu, nav, section, summary 1 
display: block; ) ) 


现在 ， 在 你 的 SCSS 文 件 里 写 入 eincluae reset-html 535] Fd ERG $8 你 就 不 必 记 住 这 
11 个 标记 了 。 

2. Compass 文 档 中 更 多 的 样式 重 置 

样式 表 中 的 全 局 样式 重 置 和 HTMLS5 样 式 重 置 基本 上 可 以 覆盖 90% 的 用 例 了 ,但 我 们 还 是 鼓励 
你 去 查阅 Compass 文 梢 中 样式 重 置 的 完整 列表 。 表 4-1 给 出 了 一 个 快速 的 预览 。 


表 4-1 Compass 里 可 用 的 样式 重 置 





























样式 重 置 混合 器 H 的 
resetboxmodel 和 殉 除 元素 的 内 外 下 和 办 0000 
reset-font 重 置 文字 的 字号 和 基线 
reset-focus 移 除 浏览 器 提供 的 轮廓 线 ( 比如 Safari 给 <input> 元 素 加 上 的 那 一 圈 线 ) 
reset-table 和 reset-table-cell ” 重 置 表格 的 边框 和 对 齐 方式 
reset-quotation 为 <blockquotes> 添 加 仅 存 在 于 样式 表 中 的 双 引 号 





现在 ， 你 已 经 知道 如 何 移 除 浏 览 融 的 样式 了 。 我 们 看 一 看 如 何在 一 般 场 录 下 使 用 Compass 的 
辅助 需 添 加 你 自己 的 样式 。 


42. 更 快 更 直观 的 排版 工具 69 


4.2 ”更 快 更 直观 的 排版 工具 


可 能 没有 任何 东西 比 排版 更 能 影响 你 的 设计 了 。 排版 不 仅仅 是 选择 字体 和 字号 。 对 于 平面 设 
计 师 来 说 ,设置 列表 样式 、 处 理 文本 折 行 都 要 花费 大 量 时 间 。 因 为 Web 是 一 个 交互 的 、 数 据 驱 动 
的 媒介 ，Web 设 计 师 有 了 更 多 的 选择 ， 比 如 设置 优雅 的 超 链接 样式 和 被 截断 文字 的 样式 。 我 们 在 
样式 表 中 处理 排版 ， 一 部 分 工作 是 选择 产 出 什么 样 的 设计 ， 男 一 部 分 工作 是 将 其 实现 。Compass 
在 此 帮助 大 家 完成 了 后 半 部 分 的 工作 , 让 你 快速 完成 设置 链接 、 列 表 以 及 其 他 元 素 样式 的 枯燥 工 
作 ， 同 时 专注 在 设计 本 身 。 在 下 一 他， 我 们 会 看 到 一 些 帮 助 你 设置 超 链接 样式 的 混合 句 ， 也 是 首 
先 要 介绍 的 排版 辅助 硕 。 这 部 分 示例 都 需要 你 通过 eimport "compass/typography" 使 用 
Compass 的 排版 模块 。 


4.2.1 REIA: 链接 辅助 工具 


好 的 设计 善于 利用 对 比 和 反差 。 给 超 链接 一 个 特殊 的 样式 , 令 其 在 网 页 中 脱 矣 而 出 不 仅仅 是 
一 个 审美 问题 ， 更 是 一 个 用 户 体验 问题 。 因 此 ， 优 秀 的 设计 师 ( 在 样式 重 置 之 后 ) 在 创建 一 个 新 
样式 表 时 ,往往 会 定义 基础 的 文本 和 链接 的 颜色 一 一 Compass 可 以 把 这 个 轻松 的 工作 变 得 更 轻松 。 

1. 轻 轻 松 松 为 链接 配色 

VFÉAKCSSTEPGA nu] By peel T BEBMKHU. CIE EB n ERES Và aH). H 
中 一 个 模式 就 是 建议 的 根据 链接 的 不 同 状态 (如 :hover 和 :visited) 在 样式 表 中 排列 超 链接 伪 
类 的 顺序 。 链 接 的 不 同 状态 是 浏览 硕 为 链接 的 伪 类 赋 子 优先 级 的 一 种 有 趣 方式 。 比 如 ， 如 采 你 把 
鼠标 停放 在 一 个 已 经 访问 过 的 链接 上 ， 哪 个 样式 会 生效 ? 

最 佳 实践 是 按照 如 下 顺序 先后 包含 伪 类 选择 六 : 

































































1 «a» 

2 :visited 
3 :focus 

4 :hover 

5 :active 


这 意味 春 你 的 CSS 看 起 来 应 该 像 下 面 这 样 ， 如 代码 清单 4-3 所 示 。 
代码 清单 4-3 ”根据 浏览 可 特征 设置 链接 颜色 的 CSS 


a (color: #333} 

visited (color: #555} 
focus (color: #00} 
hover (color: #00f} 
active ícolor: £$£00) 





fy wm mw 





你 当然 可 以 死记 便 育 地 记 住 这 个 顺序 ， 然 后 写 伪 类 来 改变 链接 颜色 。Compass 提 供 了 一 个 方 
便 的 混合 癌 来 处 理 这 项 工作 : 


a { @include link-colors (#333, #00f, #£00, #555, #f£00}); } 
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细心 的 旋 者 会 注意 到 Compass 例 子 中 的 这 个 颜色 顺序 和 CSS 例 子 中 的 并 不 吻合 .因为 Compass 
选择 了 针对 生产 效率 优化 的 顺序 ， 而 不 是 按 浏览 器 的 优先 级 顺序 。 这 个 Link-colors 的 颜色 参 
数 顺 序 是 你 最 可 能 在 样式 表 里 使 用 的 顺序 。 表 4-2 展 示 了 1ink- colors 完 整 的 参数 顺序 和 它们 被 
应 用 到 不 同 链接 状态 的 顺序 。 








表 4-2 1ink-colors 的 参数 


link-colorsllji 浏览 器 顺序 
a 
:hover :visited 
:active : focus 
:visited :hover 
:focus :active 














如 有 末 你 是 一 个 注重 细节 ， 喜 爱 简 洁 ， 更 喜爱 可 谈 性 的 人 ， 你 可 能 会 这 样 按 名 称 传递 参数 : 
a ( &include link-colors(í( 

#333, 

Shover: #00f, 

Sactive: #00, 

Ssvisited: #555, 

Sfocus: #f00}; 
i 


不 命名 的 语法 有 其 优越 性 。 因 为 1ink-colors 人 参数 是 可 选 的 ， 遵 循 由 累 托 (Pareto) 车 名 的 
“二 八 原 则 ”( 在 这 里 意味 着 20% 的 代码 覆盖 80% 的 用 例 ), 你 可 以 只 传递 前 两 个 参数 来 定义 默认 的 
颜色 和 :hovetr 状 态 的 颜色 : 

a 1 einclude link-colors(#333, #00f); } 

现在 ， 你 已 经 看 到 如 何 给 链接 着 色 了 。 让 我 们 看 一 看 在 设计 时 ，Compass 让 你 从 视 党 上 便于 
区 分 链接 的 其 他 方式 。 

2. 通过 hover-1ink 设 置 县 停 样式 

有 些 可 用 性 专家 建议 链接 下 面 始终 要 有 下 划 线 ,以 此 提示 用 户 这 个 东西 可 以 点 击 。 但 在 一 些 
行 高 有 限 的 情况 下 ， 增 加 下 划 线 反而 会 降低 阅读 体验 。 假 设 你 希望 用 下 面 的 CSS 实 现 仅 当 用 户 悬 
停 在 链接 上 时 才 显 示 下 划 线 : 


a ( text-decoration: none} 
a:hover { text-decoration: underline } 


Compass 让 链接 只 在 : novexBTll FEJA E fr, ME Hhover-linkit & $8 Bl n : 

a (Ginclude hover-linkj 

A —lRix iR e, MIÉ E ATA, BERI? 不 必 看 样式 表 里 用 了 什么 属性 ， 只 要 看 它 
HZ TMT I: hover-linko 

3. 通过 unstyled-1ink 设 置 隐 性 的 链接 

现在 设想 你 希望 在 一 段 话 里 隐藏 一 个 链接 , 移 除 所 有 会 提示 用 户 这 是 一 个 链接 的 样式 。 你 可 
以 这 样 写 CSS: 
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p.secret a 1 
color: inherit; 
cursor: inherit; 
text-decoration: inherit 
} 
这 上 段 代 人 码 会 去 挥 所 有 颜色 、 光 标 样式 或 下 划 线 ， 把 你 的 文本 混入 文本 容器 中 。 但 是 :hover 
和 :focus 状 态 下 它 会 怎么 样 呢 ? 让 我 们 更 新 一 下 CSS: 
p.secret a, 
p.secret a:hover, 
p.secret a:focus { 


color: inherit; 
cursor: inherit; 





text-decoration: inherit 


} 
这 个 建议 不 错 ， 但 是 Compass 通 过 unstyled-1link 混 合 器 把 这 个 工作 变 得 更 简单 了 : 





p.secret a { Qinclude unstyled-link } 4 
同样 ，Compass 混 合 磊 的 名 称 描述 了 它 的 用 途 。 现 在 你 已 经 看 到 Compass 是 如 何 让 链接 的 样 
式 工 作 更 简单 了 。 让 我 们 再 看 看 它 如 何 让 列表 的 样式 工作 变 得 更 简单 。 


4.2.2 ”创建 各 种 各 样 的 列表 


在 Web 排 版 中 ， 处 理 列 表 元 素 是 一 个 无 法 回避 的 问题 。 在 这 个 媒介 中 ,简洁 明 了 成 为 了 沟通 
的 关键 , 作为 一 个 设计 师 , <ul> 是 你 的 好 朋友 。 在 本 市, 我 们 会 看 到 一 些 Compass 的 辅助 硕 ( Sass 
混合 硕 )， 在 设计 优秀 的 列表 时 ， 它 们 可 以 快速 处 理 各 种 常见 的 工作 。 

1. Hpretty-bulletsZ 5x 

基于 图 片 的 项 目 符号 (如 图 4-1 所 示 ) 可 以 为 你 的 列表 元 系 增 加 神 击 力 。 但 是 正 从 5.5 开 始 文 
持 的 1ist-style-image 属 性 有 很 多 问题 。 比 如 在 低 于 IE8 的 版 本 中 ， 浮 动 列 表 元 素 不 会 显示 列 
表 项 的 图 片 。 为 了 找到 路 浏览 右 的 解决 方案 ,设计 师 们 经 背 使 用 背景 图 片 来 显示 列表 的 项 目 符号 : 


ul.features li ( 
background: url(/images/pretty-bullet.png) 5px 5px no-repeat; 
list-style-type: none; 
padding-left: 20px; 

J 











The Internet 


> Communication 
> Information 
> Cat Pictures 





图 4-1 美观 的 项 目 符 号 示例 


一 段 小 小 的 代码 足以 让 你 头疼 。 首 先 ， 你 不 得 不 根据 预期 的 内 边 距 和 图 上 宽度 计算 布局 。 这 
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里 的 5px 5px 是 background 快 捷 方 式 中 background-position 部 分 的 x 和 y 坐 标 值 ， 它 是 按照 
下 面 的 公式 计算 出 来 的 : 


# x - (padding - image width) / 2 
# y = (line height - image height) / 2 


第 二 个 问题 是 由 第 一 个 问题 引申 出 来 的 : 你 必须 知道 你 的 图 片 尺寸 。 考 虑 到 这 些 问题 ， 
Compass 提 供 了 pretty-bullets 混 合 咽 ， 有 了 它 ， 通 过 背景 图 片 显 示 列 表 的 项 目 符号 就 变 得 容 
DT: 


ul.features { 
Ginclude pretty-bullets('pretty-bullet.png') 
} 


通过 pretty-bullets 混 合 希 ，Compass 解 决 了 最 党 重 的 工作 ， 从 图 片 那里 得 到 其 尺寸 ， 进 
行 运算 ， 得 出 和 之 前 例子 相同 的 CSS。 如 果 你 需要 做 更 多 的 控制 ， 可 以 根据 名 称 或 次 序 传递 给 定 
的 Sheight、swidth 和 $spadding 参 数 : 


ul.features { 
Ginclude pretty-bullets('pretty-bullet.png', 
Spadding: 10px, 
Sline-height: 22px) 

















} 

注意 在 每 个 Compass 示 例 中 ， 我 们 并 没有 定义 完整 的 图 片 路 径 ， 只 是 写 了 文件 名 和 扩展 名 。 
这 是 因为 pretty-pullets 混 合 天 使 用 了 :image-uzr1 辅 助 硕 , 它 可 以 在 开发 环境 和 生产 环境 返回 
各 上 自 不 同 的 完整 路 径 。 现 在 你 已 经 看 到 了 如 何 创 建 美观 的 、 鉴 浏览 咒 的 项 目 符号 ， 让 我 们 再 看 看 
Tue A ERR. ERE s 

2. 通过 no-bullet 和 no-bullets 去 掉 项 目 符号 

Compass 同 样 提 供 了 一 些 快速 移 除 <11> 元 素 列 表 样 式 的 方式 。 你 可 能 会 想 ， 为 什么 不 使 用 
list-style: none 呢 ?对 于 IE8 以 上 厂 本 (以 及 其 他 浏览 名 ) 可 以 这 样 做 。 如 果 你 需要 文 持 雷 索 
德 制造 的 8 以 下 版 本 的 浏览 器 "， 那 么 你 需要 使 用 如 下 方式 : 


1i.no-bullet { 
list-style-image: none; 

















list-style-type: none; 








margin: Opx; 


} 

有 了 Compass， 你 不 必 记 住 这 个 写法 ， 使 用 no-pbullet 混 合 硕 即 可 : 

li.no-bullet { einclude no-bullet } 

如 果 你 希望 去 掉 整 个 列表 的 项 目 符号 ， 也 可 以 使 用 复数 形式 的 no-bullets 混 合 需 : 

ul.no-bullet ( einclude no-bullets) 

这 个 写法 会 为 列表 中 每 个 <11> 单 独 混 人 no-bullet 混 合 器 。 现 在 你 已 经 看 到 如 何 为 列表 和 十 
制 项 目 符号 或 去 挥 项 目 符 号 了 ， 让 我 们 看 一 看 如 何 把 列表 “ 放 倒 ”。 








(D Redmond, 微软 总 部 ， 这 里 暗 指 正 。 一 一 译 者 注 
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3. 轻松 横向 排 布 
浏览 器 默认 的 列表 样式 是 坚 直 排 布 列表 项 ,并 且 有 内 外 边 距 。 这 本 是 很 好 的 显示 方式 ,设计 
师 们 还 常常 喜欢 横向 排 布 包含 导航 链接 的 列表 ( 如 图 4-2 所 示 )。 











Home Services Blog Contact 





图 4-2” 模 向 列表 示例 
考虑 下 面 这 段 标记 : 


«ul class-"nav"» 
<li><a href-"/"»Home«/a»x/li» 
<li><a href-"/services"»5Services«/a»«/li» 
<li><a href-"/blog"»Blog«/a»«/li-» 
<li><a href-"/contact"»Contact«/a»«/li» 





</ul> 


如 何 通过 CSS 把 这 个 列表 转 成 横 回 排 布 的 导航 栏 ， 并 且 保 证 列表 项 之 间 有 8 像素 的 间距 呢 ? 
我 们 通常 建议 像 代码 清单 4-4 一 样 写 CSS。 


代码 清单 4-4 ”创建 <ul> 导 航 的 CSS 


ul.nav 1 
border: 0; 
margin: 0; 
overflow: hidden; 
padding: 0; 

j 

ul.nav li { 
display: inline; 
float: left; /* 横向 排 布 菜单 */ 
margin-left: 0px; 
padding-left: 4px; 
padding-right: 4px; 

j 


和 本 章 中 的 很 多 工作 一 样 ， 这 项 工作 并 不 是 很 难 ， 但 是 做 多 了 会 厌倦 。 有 了 Compass， 仅 仅 
通过 引入 horizontal- list HA «uL u] LASER X — LE. 














ul.nav ( G8include horizontal-list } 
除 此 之 外 , Compass 还 提供 了 一 些 钩子 , 用 于 设置 其 第 一 个 元 素 和 最 后 一 个 元 素 的 特殊 样式 。 
下 面 是 完整 的 CSS 输 出 ， 如 代码 清单 4-$ 所 示 。 


代码 清单 4-5 Compass horizontal-1ist 辅 助 侣 输出 的 CSS 
ul.nav { 
margin: 0; 
padding: 0; 
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border: 0; 
overflow: hidden; 
*woom: 1; 

j 

ul.nav li 4 
list-style-image: none; 
list-style-type: none; 
margin-left: 0px; 
white-space: nowrap: 
display: inline; 
float: left; 
padding-left: 4px; 


padding-right: 4px; .first 是 针对 低 
) 版 本 浏览 器 的 


ul.nav li:first-child, ul.nav li.first { 
padding-left: 0; 

} 

ul.nav li:last-child { 


padding-right: 0; .last 是 针对 低 
) 版 本 浏览 器 的 
ul.nav li.last { 


padding-right: 0; 
j 


XPTGRBE:first-chiladWl:last-chnilaHJpulW am, 我 们 略 去 了 两 边 元 又 对 外 的 内 边 距 。 而 
对 低 版 本 浏览 硕 ， 我 们 可 以 使 用 .fizst 和 .1ast 这 两 个 类 名。 

百 到 现在 ， 除 了 知道 会 少 写 很 多 代码 ， 你 可 能 还 没有 发 现 这 个 混合 硕 的 关键 所 在 。Compass 
中 的 大 多 数 混合 需 都 一 样 ， 天 键 在 于 都 利用 了 Sass 混 合 天 的 动态 特性 。horizontal-1ist 混 合 
天 有 两 个 参数 : Spaddqing 和 S$airection。 因 为 它们 都 是 可 选 的 ， 所 以 你 可 以 忽略 它们 构建 一 
个 从 左 到 右 、 间 距 为 8 像素 的 列表 。( 实际 上 spaaqing 的 软 认 值 是 4px。 左 边 4 像 素 加 右边 4 像 
素 就 是 8 像素 。) 如 采 你 想 颠 倒 项 目 顺序 并 加 宽 边 距 该 怎么 办 呢 ? 很 简单 , 给 这 个 混合 带 传 入 两 个 
参数 : 

ul.nav { @include horizontal-list(7px, right)) 

现在 ， 列 表 项 两 边 就 都 有 了 7 像素 的 边 距 〈 两 个 项 目 间隔 14 像 素 ) FHEAE, MUFA. 
P 面 是 更 新 之 后 的 CSS 代 码 片段 : 











ul.nav li { 


float: right; 

padding-left: 7px; 

padding-right: 7px; 
1 


如 你 所 见 , Compass 把 横 问 导航 列表 减少 到 了 一 行 代码 , 那么 Compass 可 以 处 理 内 联 列表 吗 ? 
4. 用 inline-1List 处 理 内 联 列表 
前 面 有 一 节 ,我 们 介绍 了 如 何 让 链接 看 起 来 像 文 字 。 列 表 也 可 以 这 样 吗 ? 看 看 下 面 这 段 代码 : 
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«ul class-"giant-words"- 
«]i»Feec/1li» 
«li»Fi«c/li» 
«li»Fo«c/li» 
«li»Fum«/li» 
</ul> 
<p>are some words of giants with acute senses of smell 
for Englishmen. </p> 


在 这 个 (人 为 设计 的 ) 例子 中 ,我 们 把 列表 设置 成 内 联 的 样式 ， 并 用 喜气 隔 开 ， 这 样 可 能 该 
起 来 更 合适 。Compass 可 以 用 一 行 代码 就 做 到 : 


ul.words { @include delimited-list } 





Fee, Fi, Fo, Fum 


are some words of giants with acute senses of smell for Englishmen. 





图 4-3 分隔 列表 示例 


通过 组 合 :after 和 :1ast-child (最 后 一 个 列表 项 是 没有 如 号 的 )， Compass 产 生 的 CSS 可 
以 让 列表 变 成 内 联 的 。 

但 稍 等 ， 这 还 不 够 ! 因为 Compass 还 可 以 让 你 定制 分 隅 符 ， 让 这 个 列表 更 赤 气 : 

ul.words ( Ginclude delimited-list("! ") ) 

至 此 ，Compass 文 持 的 列表 样式 就 讲解 完了 。 下 一 他 ， 我 们 看 看 Compass 如 何 帮助 我 们 做 各 
种 文字 处 理 。 


4.2.3 用 辅助 工具 征服 文字 


不 同 于 平面 设计 师 ，Web 设 计 师 花费 大 量 时 间 调 整 他 们 上 自己 并 不 写 其 至 可 能 永远 也 看 不 到 的 
东西 。 设 计 模 板 时 要 考虑 用 户 提供 的 、 数 据 粥 动 的 内 容 ， 这 些 内 容 可 能 会 汶 出 预 设 的 容 天 范围 。 
邓 运 的 是 ，Compass 包 含 了 一 些 辅助 天 可 以 让 这 类 工作 更 简单 。 

1. 用 省 略 写 代表 截断 内 容 

Web 设 计 师 沼 第 面 对 的 一 个 问题 是 把 一 段 长度 不 确定 的 文本 放 入 一 个 冤 度 固定 的 容 帮 里 ， 比 
如 一 个 表格 的 单元 格 。 在 过 去 ,设计 师 需 要 在 泻 染 标记 之 前 从 服务 右 端 截断 内 容 。 有 了 CSS， 你 
可 以 应 用 text-overflow: ellipsis: 




















td.dot-dot-dot d 
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 


现在 , EA BOL P HITS DER RH XS BCBUSTA T LE Wt RU EC o EX T , Compass 
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把 这 件 事变 得 更 简单 了 : 
td.dot-dot-dot { 
Qinclude ellipsis; 


} 
使 用 ellipsis 混 合 器 额外 的 好 处 是 , 这 样 可 以 生成 带 Opera 和 微软 等 不 同 浏览 絮 厂 商 前 级 的 
属性 名 。 完 整 的 CSS 输 出 如 下 : 


td.dot-dot-dot { 
white-space: nowrap; 











overflow: hidden; 





o-text-overflow: ellipsis; 
-ms-text-overflow: ellipsis; 





text-overflow: ellipsis; 


j 

值得 注意 的 是 ， H ribtext-overflow/EJW, 必须 同时 使 用 white-space: nowrapo iH 
各 情况 下 ， 开 发 者 会 党 得 很 难 记 住 它 是 white-space 还 是 whitespace。 谢 天 谢 地 ，Compass 想 
RZE, KEA FTE, 

2. 用 nowrap 防 止 文本 折 行 

nowzap 混 合 硕 简单 好 用 ， 可 以 产生 如 下 CSS 代 三 : 

td ( white-space: nowrap} 

RILE Ta fn] PH E JN. : 

td { @include nowrap } 

通过 这 种 方式 ， 你 不 必 记 住 white-space 有 连 字 符 。 不 注 的 是 ， 如 果 你 把 “nowrap” 记 成 
“now rap”( 很 多 人 人 经常 如 此 )， 就 无 能 为 力 了 。 

下 面 我 们 再 看 一 个 Web 设 计 中 与 文本 相关 的 常见 任务 : 有 图 片 时 ， 完 全 不 显示 文本 。 

3. 用 replace-text 将 图 片 转换 为 文字 

尽管 有 诸如 efont-face、Cuf6n 等 其 他 新 技术 的 不 断 发 展 ， 设 计 师 们 在 必要 时 还 是 采用 伟 
统 的 方法 来 改进 Web 排 版 一 一 把 文字 处 理 成 图 片 显 示 出 来 。 篆 背 在 头条 和 其 他 核心 的 页 面 元 素 
上 ,图 片 可 以 传递 更 复杂 的 设计 元 系 ， 有 时 你 无 法 用 标准 的 字体 来 处 理 。 在 这 些 情 形 下 ,许多 设 
计 师 都 急于 在 该 文本 原本 的 位 置 放 一 张 <img> 了 事 。 对 于 可 访问 性 (和 SEO ) 而 言 ， 更 好 的 建议 
是 用 CSS 来 处 理 。 考 虑 图 4-4 中 的 例子 ,我 们 会 悄悄 利用 图 片 强 大 的 排版 魔力 进行 特殊 的 泻 染 , 并 


以 此 替换 头条 。 \ 
Æ COFFEE 


图 4-4 ”替换 Coffee 文 本 


为 了 用 CSS 实 现 它 ， 你 可 以 做 如 下 的 事情 : 
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hl.coffee { 
text-indent: -119988px; 
overflow: hidden; 





text-align: left; 





background-image: urlí('/images/coffee-header.png'); 
background-repeat: no-repeat; 
background-position: 50% 503; 


) 

第 一 步 是 对 移 认 的 文字 设置 一 个 负 值 的 缩 进 将 其 隐藏 起 来 。( 如 采 你 有 一 个 超过 119,988 像 
ZR B HJ EZR A , 请 和 我 做 朋友 吧 ! ) 然后 通过 background 属 性 把 文本 转换 成 图 片 。 Compass 通 过 
replace-text 辅 助 硕 把 这 件 事 情 变 得 更 简单 了 : 

hl.coffee [ Ginclude replace-text("coffee-header.png") } 

不 用 提供 图 片 的 /images 这 部 分 路 径 。 这 是 因为 Compass 内 部 会 使 用 一 个 ijmage-url 的 辅助 
全， 它 依赖 于 Compass 的 配置 信息 ， 注 明 图 片 的 路 径 。 最终 你 只 需要 提供 图 刻 的 文件 名 即 可 。 第 7 
革 将 介绍 更 多 关于 图 片 辅助 各 和 其 他 资源 辅助 带 的 信息 。 

Compass 同样 提供 了 一 可 制 版 本 的 replace-text jE € f replace-text-with- 
dimensions, ÉSZRE K R)yE EIE XEJUAS HINT e 

MEREZI T Compass IB3ROSCAS B—265C HAB. P— B. RISTA T EAE RE— 
般 布 局 的 技巧 。 


4.3 布局 辅助 工具 


除了 网 格 ， 布 局 模式 估计 是 样式 表 中 最 个 性 化 的 部 分 。Compass 提 供 了 一 对 辅助 硕 来 应 对 不 
同 的 布局 场景 : 精 沛 的 页 脚 和 可 伸展 元 系 。 在 尝试 下 面 的 例子 之 前 请 先 通 过 @import 
"compass/layout'"; 导入 布局 模块 。 









































4.3.1 Tài B D AAN 


想象 一 个 场景 ,你 需要 页 脚 始终 停 徘 在 页 面 的 最 下 方 。 你 第 一 想到 的 可 能 是 position: 
fixed。 但 不 全 的 是 ， 如 于 你 需要 文 桂 IE6 的 话 ， 那 么 CSS 不 会 且 接 生效 。 下 面 我 们 介绍 Ryan Fait 
的 实现 方式 ， 以 代码 清单 4-6 中 的 标记 为 例 。 


代码 清单 4-6 ” 烙 济 的 页 脚 的 标记 





<body> 

<div id="content"> 
页 面 内 容 — 
<div id="bump"></div> 

</div> 

<div id="footer"> 
停靠 在 页 脚 的 内 容 。 

</div> 


</body> 





78 $43 A Compass 就 不 再 枯燥 


你 可 以 用 下 面 的 CSS 粘 清 页 脚 。 
代码 清单 4-7” 粘 浏 的 页 脚 的 CSS 


html, body i 
height: 100%; < 3RXIE6O 
} 


#content { 
clear: both; 
min-height: 100%; 
height: auto !important; 
height: 1003; 
margin-bottom: -40px; 

j 

*content #bump { 
height: 40px; 

j 

tfooter { < 一 一 一 页 脚 
clear: both; 
position: relative; 
height: 40px; 


j 

在 这 个 例子 中 , 可 以 通过 #footer 选 择 帝 塑造 一 个 40 像 素 高 的 页 脚 ,给 内 容 区 域 设 置 一 个 最 
小 的 高 度 为 100%， 以 确保 其 至 少 可 以 占 满 屏 幕 的 高 度 。 不 芋 的 是 , 你 不 得 不 为 <html> 和 <body> 
标记 使 用 height: 100%， 同 时 针对 IE6 设 置 height: auto !importantLAhacks&content7UzA 
设置 的 min-height。 而 #bump 元 素 仪 仅 需 要 在 下 方 提供 足够 的 内 边 中 以 偏 移 其 页 脚 。 

这 个 CSS 不 仅 考虑 到 了 兼容 了 E6， 而 且 扩 展 了 更 多 ， 它 更 让 你 不 得 不 设置 3 个 和 页 脚 高 度 相 关 
的 值 。 有 了 Compass 的 sticky-footezr 混 合 器 ， 你 可 以 淘汰 这 种 写法 了 : 

@include sticky-footer(40px, "4content", "£sfooter", "isticky-footer"); 

现在 如 果 你 决定 创建 你 的 页 脚 ， 不 论 高 低 ， 你 只 需 改 一 个 地 方 ， 其 余 的 CSS 就 自动 生成 了 。 
至 此 , 你 已 经 知道 了 如 何 创 建 一 个 始终 在 最 下 面 的 页 脚 ， 下 一 方 ,我 们 看 看 如 何在 父 元 素 内 伸展 
JU c 


4.3.2 ”可 伸展 元 素 


流 布局 被 认为 是 Web 界 面 的 核心 优势 之 一 ，Web 设 计 师 也 经 常理 所 当然 地 使 用 它 。 而 那些 有 
更 面 应 用 开发 背景 的 人 , 却 第 第 忽视 .NET WinForms、JavaSwing、Flash 等 框 染 中 常见 的 绝对 定位 
方式 。 当 然 ，Web 通 过 positin: absolute 文 持 了 这 种 布局 方式 : 


a.login ( 

position: absolute; 

top: 5px; right: 5px: bottom: 5px; left: 5px; 
) 


Compass 的 stretch 混 合 关 提供 了 一 个 设置 这 些 样式 的 快捷 方式 : 
































4.44 ”小 结 79 


a.login { 8include stretchí(5px, 5px, 5px, 5px) } 

产 出 的 代码 和 之 前 相同 。stretch 混 合 器 有 4 个 参数 : Soffset-top、 Soffset-right, 
Soffset-bottom4fll$offset-left, Compassi^ $E [t T H WE — A mp ul A A EA s 
stretch-x 和 stretch-y， 它 们 分 别 只 带 有 Soffset-left 和 S$offset-right、soffset-top 
和 soffset-bottom 了 两 个 参数 。 





4.4 ”小 结 


本 章 ， 我 们 了 解 了 一 些 Compass 省 时 省 力 的 工具 ， 终 于 可 以 告别 样式 表 中 枯燥 的 工作 了 。 我 
们 使 用 针对 性 的 样式 重 置 在 全 局 样式 重 置 量 级 过 重 的 情形 下 ,只 清除 部 分 元 素 的 样式 。 看 到 了 如 
何 使 用 1ink-colors、 hover-link, no-bullet, pretty-bulletsflhorizontal-listic€ 
置 链 接 和 列表 的 样式 ; 也 看 到 了 Compass 提 供 哪些 处 理 文本 湾 出 和 折 行 、 布 局 、 颜 色 ， 甚 至 清除 
浮动 的 快捷 方式 。 

下 一 半 , 我 们 会 看 到 一 些 Compass 的 进 阶 CSS3 特 性 ,使 创建 复杂 的 用 户 界面 主题 变 得 更 容易 。 

















”通过 Compass 使 用 CSS3_ 





本 章 内 容 

O 用 Compass 的 CSS3 模 块 创建 路 浏览 右 的 CSS3 样 式 表 
O 在 低 版 本 正中 支持 一 些 CSS3 的 特性 

C Compass 里 的 CSS3 高 阶 技 能 





通过 之 前 3 章 的 学 习 , 我 们 领略 到 了 Compass 如 何 移 除 流程 中 重复 旦 枯燥 的 运算 , 快速 创建 样 
式 表 。 之 前 ,我 们 的 重点 一 直 是 适用 多 年 的 CSS 选 择 器 及 其 属性 上 。 而 在 这 一 章 ， 我 们 会 聚焦 更 
多 Web 设 计 的 前 沿 方法 ， 它 们 被 统称 为 CSS3。 





5.1 什么 是 CSS3 


CSS3, 或 称 第 三 代 层 受 样 式 表 ， 是 基于 CSS2 的 规范 建立 起 来 的 。 我 们 现在 称 为 CSS3 的 第 一 
份 草案 诞生 于 1999 年 ， 它 包含 20 多 个 模块 以 及 很 多 特性 ， 并 在 不 断 发 展 完善 。 最 近 几 年 ， 随 着 浏 
览 右 开始 支持 CSS3, 样式 表 开 发 者 们 才 真 正 从 中 获 益 。 那么 ，CSS3 为 我 们 带 来 了 什么 呢 ? mE. 
变量 , 还 是 混合 絮 ? 不 好 意思 ， 这 些 都 不 是 ， 你 仍然 需要 通过 Sass 搞 定 它 们 。CSS3 的 变革 可 以 归 
纳 为 两 部 分 一 一 更 给 力 的 选择 器 ， 帮 助 我 们 定位 元 素 ; 各 种 新 的 属性 ， 用 于 修饰 元 素 的 外 观 。 我 
们 会 用 本 章 剩 余 的 篇 幅 介 绍 新 属性 。 














5.1.1 新 属性 : XU SR B RELIRE [f nU 


REA TS DUCSS32e— 2H ACE REPE, [HSEER EXUESTEH'ERJSESEREBEAJSHHISI, AEA 
ERMS, AWL FERNE. EDT as) IA HEISE], DU Vn N RERE E 
也 不 同 , Eum dE REX. Du. AEA uuum 76b N44) AARDAS] 
入 CSS3 的 新 特性 。 设 想 一 个 早期 通过 原生 支持 的 porder-radius 属 性 实现 Web 2.0 辆 角 的 例子 : 


button, a.button { 
-webkit-border-radius: 5px; 














-moz-border-radius: 5px; 





border-radius: 5px; 
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KEMERE ERI 3X V UIS B CS £e xA) RIBUSxHJborder-radius/BTE, THLABI n] As 
是 这 样 。 浏 览 堪 对 圆 角 的 引入 分 别 是 从 Safari 3.2/8 Firefox 3.5 开 始 的 ， 并 分 别 带 有 -webkit- 和 
-moz- 前 级 。 这 意味 着 如 果 你 想 支持 Safari1、Firefox 和 Opera， 你 就 需要 写 3 个 属性 。 这 种 复制 / 粘 
贴 已 经 使 样式 表 开 发 工作 不 轻松 了 ， 如 来 厂商 们 实现 的 语法 都 不 一 样 ， 那 么 CSS3 属 性 用 起 来 束 
真 的 令 人 头疼 了 。 














5.1.2. ”让 Compass 拯 救 你 


正如 第 1 章 里 简单 介绍 过 的 , Compass 承 担 了 繁重 的 工作 , 让 你 从 支持 每 个 厂商 命名 空间 的 痛 
吾 中 解脱 出 来 。 你 现在 可 以 使 用 标准 的 语法 ， 让 Compass 生 成 所 有 的 CSS 前 组， 如 代码 清单 5-1 
所 示 O 


代码 清单 5-1 用 Compass 更 快 生成 厂商 命名 空间 














Gimport "compass/css3"; 4— S^ Compass CSS3 支 持 
.notice { 
@include border-radius (5px); «—. Fiborder-radius;i^Jn[z ff 


j 
EHHE, (ULME NCompassh css, fii liboraer-radiusik tre. Uu] 
以 快速 生成 文 持 所 有 主流 浏览 硕 的 CSS 人 代码， 如 代码 清单 $-2 所 示 。 


代码 清单 5-2  HiCompasslJborder-radiusi G8 ÆSA 


.notice ( 








-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 





-o-border-radius: 5px; 
-ms-border-radius: 5px; 
border-radius: 5px; 


】 

正如 代码 列 出 来 的 那样 ， 你 不 仪 支持 Safari1、Chrome 和 Firefox， 还 顺便 支持 了 Opera 和 IE9。 
即便 如 此 ， 如 果 你 并 不 打算 文 择 所 有 的 浏览 希 广 商 ,， 那么 这 份 代码 就 显得 有 额外 负担 了 , 那 该 怎 
么 办 呢 ? Compass 提 供 了 一 种 简单 的 方式 ， 通 过 浏览 硕 文 持 模块 设置 一 些 选项 ， 来 配置 我 们 和 硕 望 
创建 的 广 商 命名 空间 ， 如 代码 清单 $-3 所 示 。 


代码 清单 5-3 ”在 Compass 里 配置 厂商 命名 空间 


@import "compass/cssi"; 











$experimental-support-for-opera: false; 
Sexperimental-support-for-microsoft: false; 
Sexperimental-support-for-khtml: false; 


.notice f{ 
Qinclude border-radius(b5px); 


j 


J- 
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Compass 提 供 了 几 个 类 似 于 experimental-support-for-xxxx 的 变量 配置 项 。 如 果 我 们 
以 false 和 者 盖 其 默认 值 ，Compass 在 产 出 CSS 时 就 会 忽略 相应 的 厂商 命名 空间 。 

5.1 节 已 经 介绍 了 如 何 通 过 Compass 解 决 一 些 令 人 头疼 的 CSS3 属 性 用 法 。 在 本 草 余 下 的 部 分 ， 
我 们 将 探讨 一 些 使 用 CSS3 创 建 现代 设计 元 素 以 及 通过 Compass 快 速 搞定 它们 的 示例 。 





5.2 ”通过 Compass 使 用 CSS3 


你 已 经 7 了解 了 Compass 如 何 将 CSS3 属 性 中 丑陋 的 厂商 前 级 抽 离 出 来 。 这 一 市 会 介绍 更 多 
Compass 的 CSS3 模 块 ， 以 及 如 何 让 设计 工作 事半功倍 。 








5.2.1 Ef 


尽管 我 们 确定 ， 即 使 网 页 没有 圆 角 也 不 影响 阅读 ,但 设计 师 们 ( 也 包括 管理 者 和 用 户 ) 都 言 
欢 圆 角 。 按 钮 、 标 签 、 侧 边栏 以 及 表格 都 无 法 逃脱 被 砍 掉 边 角 然 后 磨 圆 的 答 命 。 设 计 师 们 为 此 运 
用 了 很 多 技术 ， 如 多 背景 图 片 或 借助 额外 的 标签 。 焉 好 ，CSS3 通 过 porder-radius 属 性 让 这 份 
工作 回 到 了 正轨 。 我 们 看 看 图 5-1。 








EZENCEZSCID woe 


呈现 效果 也 因此 不 同 





图 5-1 圆 角 按钮 


在 图 中 ， 我 们 看 到 三 个 按钮 〈 和 一 个 侧 边栏 )， 它 们 都 有 美观 的 圆 角 。 注 意 ， 每 个 按钮 的 辆 
角 程度 , 或 者 说 边框 半径 是 不 同 的 。 如 果 你 不 需要 支持 4 以 下 版 本 的 Safari、3.6 以 下 版 本 的 Firefox、 
Te xljSafarisX IH fioc sii] Va as HJ, 就 大 可 放心 地 使 用 CSS3 里 的 border-radius 属 性 。 但是， 如 
果 你 需要 支持 它们 ， 那 CSS 代 码 就 比较 乱 了 ， 这 可 要 “归功 ”于 厂商 命名 空间 ， 如 代码 清单 5-4 
所 示 。 


代码 清单 5-4 CSS 圆 角 


button { 
background: red; 这 三 个 按钮 的 基本 样式 
border: Q; 


color: #fff; 
line-height: 30px; 
width: 100px; 

} 


button.rounded { . 
Firefox « 3.6 
-moz-border-radius: 5px; 
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-webkit-border-radius: 5px; 
) | Safari<5、 移 动 版 Safari、 


安 卓 浏览 器 
button.really-rounded { 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
} 
button.extreme-rounded { 
-moz-border-radius: 30px; 
-webkit-border-radius: 30px; 


j 

为 老 版 本 的 浏览 需 需 要 厂商 命名 空间 来 文 持 这 一 特性 ， 所 以 你 在 使 用 boraqer-radius 属 
性 时 不 得 不 包含 -moz- 和 -webkit- 前 级 。 这 类 无 聊 的 工作 让 CSS 看 起 来 更 像 打 凶 练 习 而 非 设计 。 
5E 7; Compass — MEE ss P] Ef BUM EE Ze 00 vae A ITI SER ff. RTRA Compass ff] 76 JN. 
这 项 工作 ， 如 代码 清单 5-5 所 示 。 


代码 清单 5-5 Compass! HJCSS3border-radius 

















button ( <O 基本 的 按钮 样式 
background: red; 
border: 0; 


color: &fff; 
line-height: 30px; 
width: 100px; 

} 





button.rounded { 
@include border-radius (5px) «T—3À4 


} 


button.really-rounded ( 
Ginclude border-radius (10px) < 一 从 设置 圆 角 
l 


button.extreme-rounded { 
Qinclude border-radius (30px) < 


} 

例 中 的 CSS 很 容易 理解 。 你 为 三 个 按钮 都 设置 了 一 些 基本 样式 估 ， 然 后 设置 了 每 个 按钮 的 辆 
fg. 很 明显 ， 这 里 被 einclugde 的 border-radius 是 一 个 Sass 混 合 右 。 我 们 回 到 了 一 行 代码 设 
置 一 个 按钮 圆 角 的 世界 。Compass 会 在 生成 的 CSS 中 包含 我 们 需要 的 这 些 厂商 命名 空间 ( 基于 我 
们 已 经 在 5.1 节 讨论 过 的 配置 变量 )。 

现在 我 们 知道 了 Compass 如 何人 处理 圆 角 ， 接 下 来 我 们 看 看 男 一 个 通用 设计 元 对 H. 

















5.2.2 CSS3 阴影 


明 影 是 设计 师 们 的 常用 技巧 , 它 可 以 把 二 维 的 网 页 变 得 有 立体 感 ,仿佛 元 素 浮 在 页 面 上 一 样 。 
我 们 来 看 一 个 CSS3 阴 影 的 例子 ， 如 图 5-2 所 示 。 





84 第 5 章 it Compass 使 用 CSS3 


This text is floating off the page 


This text is etched into its container, but that 
container is floating off the page. 





图 $-2 CSS3 阴 影 


你 在 这 幅 图 中 能 看 到 多 少 处 阴影 呢 ” 如 果 你 说 是 两 处 ， 那 么 请 再 仔细 看 看 。 你 应 该 看 得 到 3 
处 阴影 。 其 中 的 两 处 比较 明显 : 第 一 段 的 文字 阴影 和 第 二 段 的 盒 阴影 。 如 果 在 此 之 前 ， 你 没有 接 
触 过 这 项 技术 ， 那 么 你 很 容易 忽视 第 二 段 文字 的 色 刻 效果 。 尽 管 这 并 不 是 真正 的 阴影 而 是 发 散 出 
来 的 亮光 , 你 仍然 可 以 使 用 CSS3 属 性 实现 它 。 我 们 看 看 后 面 的 这 个 CSS 例 子 , 如 代码 清单 5-6 所 示 。 




















代码 清单 5-6 ”用 CSS3 创 建 阴 影 





hi { 

text-shadow: ccecce 5px 5px 2px; a— 文字 阴影 
} 
h2 { 

moz-box-shadow: #ccccce 5px 5px 2px; a— 使 阴影 





-webkit-box-shadow: #ccccco 5px 5px 2px; 
box-shadow: :«4cccccc 5px 5px 2px; 
text-shadow: #dddddd -1px 1px 0; 9 SEZI|Y.-E 
background: #999; 
padding: lem; 
j 


fiii FHCSS3HJ text- shadow F box-shadow LM T JIE pA BH THB, HEKE 
text-shadow XM Y ZF. WRRCAARIT KEKER, JJ AUR :3Compas2 
box-shadow 提 供 了 混合 俘 来 帮助 你 生成 那些 厂 商 命 名 空间 , 如 代码 清单 5-7 所 不 。 











代码 清单 5-7 ”使 用 Compass 的 pox-shadqow 混 合 需 
h2 ( 
@include box-shadow(H4ccc 5px 5px 2px); 
text-shadow: #ddd -lpx 1px 0; 
background: #999; 
padding: 1em; 
j 
Compass 再 一 次 通过 box-shadqow 混 合 带 解 决 了 烦人 的 广 商 命名 空间 问题 。 你 可 能 会 惊讶 ， 
尽管 CSS3 中 的 text-shadqow 属 性 并 不 存在 广 商 命名 空间 的 问题 ， 但 Compass 还 是 提供 了 这 样 的 
IR EARS 这 是 因为 Compass 的 box-shadow 和 text-shadow 混 合 大 都 可 以 被 应 用 为 多 重 阴 影 。 我 


们 来 看 图 5-3， 它 展示 了 一 个 运用 多 重 CSS3 阴 影 的 例子 。 
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f in motion Text in motion Text in motion 











Kk5-3 ”为 一 个 元 素 运 用 多 重 CSS3 阴 影 


在 这 幅 图 里 ， 你 看 到 了 如 何 运 用 多 重 CSS3 阴 影 实现 非常 复杂 的 效果 。 首 先 ， 我 们 设置 了 动 
感 的 文字 。 人 然后 ， 我 们 模拟 出 “Simon Says” 这 一 80 年 代 的 老式 游戏 。 我 们 看 看 实现 这 些 效 果 的 
CSS 代 码 ， 如 代码 清单 5-8 所 示 。 


代码 清单 5-8 运用 CSS3 的 多 重 阴 影 





motion 1 
text-shadow: «—0 动感 的 文字 
EE 
rgba(0, 0, 0, 0.4) -400px 0 0, 
rgba(0, 0, 0, 0.3) -600px 0 0, 
råbalt; DE. Usa) -600px 0 Uj 


font-size: 2em; 
font-style: italic; 
text-align: right; 

} 

.Simon { 
-moz-border-radius: 100px; 
-webkit-border-radius: 100px; 
borđer-radius: 100px; 





moz-box-shadow: 
black 0 0 0 25px, 1O 黑色 的 圆 环 
red 0 -50px 0, 
blue 50px Opx O, v 
yellow 0 50px 0, 多 个 彩色 的 按钮 
lime -50px 0 0; 
-webkit-box-shadow: 
black 0 0 0 25px, 
red 0 -50px 0; 
blue 50px due X. 
yellow 0 50px O, 
lime -50px 0 0; 
box-shadow: 
black 0 0 0 25px, 
red 0 -50px 0, 
blue 50px 0px 0, 
yellow 0 50px 0, 
lime -50px 0 0; 
background: #999; 
color: #f£fff; 
height: 50px; 
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margin: 100px auto; 
padding: 40px; 
text-align: center; 
width: 50px; 

j 


我 们 运用 多 重 text- ERE 并 且 令 透明 度 递 减 ， 从 而 实现 动感 文本 
的 效果 。 对 于 “Simon Says” 游 戏 来 说 ， 我 们 运 了 一 个 spread 值 为 25px 的 黑色 阴影 全 且 绕 在 
游戏 的 正中 间 形 成 一 个 圆 环 。 然后 我 们 使 用 了 一 n 2a HOH FL rexitifry i 59 8-77 890 2359] 
偏 移 一 点 形成 其 他 按钮 。 如 你 所 愿 ，Compass 去 挥 了 重复 的 代码 ， 如 代码 清单 5-9 所 示 。 


代码 清单 5-9 Compass 中 的 多 重 CSS3 阴 影 
.motion { 


einclude text-shadow( 0O 多 重文 字 阴 影 











rgba(#000,.5) -200px 0 0 
rgba(4000,.4) -400px 0 0, 
rgba(#000,.3) -600px 0 0 
rgba(#000,.2) -800px 0 0 

27 

tont-size: 2em; 

font-style: italic; 


text-align: right; 
} 


.Simon { 
@include border-radius(100px); 
Ginclude box-shadow|( «—9 多 重合 阴影 
black 0 0 0 25px, 
red 0 -50px O0, 
blue 50px -0px 0, 
yellow 0 50px 0, 
lime -50px 0 0 
hs 
background: $999; 
color: SIII; 
height: 50px; 
margin: 100px auto; 
padding: 40px; 





text-align: center; 
width: 50px; 
} 


box-shadow t 489 PH 731168 2: T) EMAZTE. "E—ftext-shadowlk 428 
O roe A, M DE x 间 ， 但 是 如 采 我 们 在 这 个 例子 的 基 
础 上 更 进一步 ， 你 就 能 感受 到 它 的 威力 ， 如 代码 清单 5-10 所 示 。 


代码 清单 5-10 ”在 Compass 中 重用 文字 阴影 


Sshadow-1: rgba (#000,.5 
Sshadow-2: rgba(4000,.4 
Sshadow-3: rgba(4000,.3 
Sshadow-4: rgba (#000,.2 

















) -200px 0 0; 
) 0 0; 定义 文字 阴影 
) -600px 0 0; 
) 0 0 
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使 用 全 部 的 
.motion { 4 个 阴影 
dinclude text-shadow(S$shadow-1, S$shadow-2, Sshadow-3, Sshadow-4); 


font-size: Žem; 
font-style: italic; 





text-align: right; 
} 


.skipping { 
Ginclude text-shadow(S$shadow-2, $shadow-4); -© 只 使 用 两 个 阴影 
} 


在 这 个 例子 中 , 我 们 再 次 把 多 重 阴 影 运 用 在 了 两 个 元 素 上 , 但 这 次 ， 有 一 个 元 素 只 使 用 了 两 
个 阴影 。 我 们 可 以 只 定义 一 次 阴影 而 将 其 多 次 传递 给 text-shadqow 混 合 硕 以 达到 重用 的 目的 。 
如 果 你 使 用 Sass 脚 本 和 第 12 草 的 相关 技巧 来 创建 程序 化 的 阴影 , 那 text-shadqow 混 合 磊 就 变 得 更 
有 趣 了， 如 代码 清单 S-11 所 示 。 


代码 清单 5-11 在 Compass 中 使 用 默认 设置 创建 阴影 


$shadow-color: #ccc; <0 共享 的 阴影 设置 
Sshadow-h: 5px; 

$shadow-v: 5px; 

S$shadow-blur: 0; 














$default-text-shadow-color: $shadow-color; «—9 默认 文字 阴影 
Sdefault-text-shadow-h-offset: Sshadow-h:; 
Sdefault-text-shadow-v-offset: Sshadow-v; 
Sdefault-text-shadow-blur: Sshadow-blur; 


Sdefault-box-shadow-color: $shadow-color; «—e6 BUASIBZ 
Sdefault-box-shadow-h-offset: S$shadow-h; 
$default-box-shadow-v-offset: Sshadow-v; 
Sdefault-box-shadow-blur: $shadow-blur; 








hi, h2 (font-family: sans-serif;) 


mb 4 
Ginclude text-shadow; «—Q 默认 值 
j 


h2 ( 
ainclude box-shadow: 
Ginclude single-text-shadow(é4ddd, -lpx, ipx}; «—9 特殊 的 文字 阴影 
background: #999; 
padding: lem; 
} 


在 原始 代码 里 ， 这 些 重 构 并 不 会 市 来 任何 好 处 。 而 实际 上 ， 它 的 代码 比 原 本 的 例子 更 长 了 。 
在 做 评判 之 前 ， 让 我 们 一 步 步 分 解 玉 看。 首先 ,我们 通过 一 些 Sass 变 量 设置 了 几 个 共 至 的 阴影 设 
置 @, 我 们 可 以 重用 这 些 变 量 来 设置 Compass 默 认 的 text-shadow 效 果 估 和 box-shadow 效 果 合 。 
现在 我 们 不 传递 任何 参数 也 可 以 调用 这 些 混合 絮 了 人 @。 并 且 ， 我 们 还 可 以 通过 single-text-shadow 
混合 帮 传 递 我 们 希望 履 盖 的 参数 来 添加 其 他 文字 阴影 全 
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诚然 ， 对 于 一 个 只 有 两 三 个 阴影 的 简单 页 面 来 说 ,这 有 点 小 题 大 做 , 但 是 想象 一 下 拥有 大 量 
元 素 的 大 规模 网 站 ， 当 它 需 要 统一 文字 阴影 或 盒 阴 影 时 ， 这 种 工作 就 非常 必要 了 。 相 对 于 创建 特 
殊 的 CSS 类 来 说 ， 你 可 以 设置 一 些 默认 值 来 应 对 样式 表 中 大 量 重 用 的 情况 。 

现在 你 已 经 知道 Compass 是 如 何 处 理 文字 阴影 和 盒 阴 影 的 了 ， 下 面 让 我 们 来 认识 一 些 有 难度 
的 东西 : CSS3 颜 色 渐变 




















5.2.3 MEAE 


如 你 在 使 用 border-radius、text-shadow 和 box-shadow 的 CSS3 例 子 中 看 到 的 ， 厂 商 合 
名 空间 是 一 个 痛 点 。 你 已 经 知道 Compass 如 何 帮 你 禹 入 -webkit-、-moz- 和 其 他 前 缀 。 而 在 对 
CSS3 颜 色 渐 变 的 支持 上 上， 你 会 发 现 Compass 不 仪 仪 能 帮 你 敲 子 ， 还 能 市 省 你 的 脑 细 胞 。 来 看 看 图 
5-4 展 示 的 在 日 党 生活 中 会 遇 到 的 例子 。 








图 5-4 ”电视 机 测试 图 和 案 的 颜色 渐变 


我 们 在 电视 机 没有 信号 的 时 候 见 到 过 这 个 熟悉 的 测试 图 案 。 这 个 图 案 是 8 种 套色 的 模 辐 线性 
颜色 渐变 ， 每 种 颜色 占 图 案 宽 度 的 12.3% 且 均匀 分 布 。 我 们 试 春 用 CSS 在 网 页 上 重 构 这 个 图 案 
如 代码 清单 S-12 所 示 。 


代码 清单 5-12 ”用 CSS3 实 现 电视 机 测试 图 案 
*pattern { 
background: -webkit-gradient( <0 旧版 Webkit 语 法 
linear, 360deg, 360deg, 
color-stop(0%, #bfbfbf}, 
12.5%, #bfbfbf), 
12.5%, #bfbf00)}, 








color-sto 
top 
color-stop(25$, #bfbf00)}, 
color-stop(25%, #00bfbf}, 
color-stop(37.5%, #00bfbf), 


pi 

coior-s ( 

( 

( 

( 
color-stop(37.5$, #bfbf00}, 

( 

( 

( 

( 

( 








color-stop RU 5%, #00bf00)}, 
color-stop(50 $00bf00), 
color-stop xi tb£fOObf), 
color-stop(í62. 5%, #bf00b£}, 
color-stop(62.5%, #bf0000)}, 


, *b£0000), 
color-stop t0000b£f), 


color-stop(7 
(7555 
color-stop(87.5$, $0000bf), 
(8 
( 


5% 
53% 
Ta 
color-stopí(87.5$, 4000000), 
color-stop(100$, $000000)); 
background: -webkit-linear-gradient( 
360deqg, 
ébfbfbf OZ, #bfbfbf 12.53, 
débfbfOO 12.53%, #bfbf00 25$, 
&OO0bfbf 25$, #00bfbf 37.5%, 
totbf00 37.59, #00bf00 37.52, 
*$00bfO0 50$, d$ bfOObf 50$, 
&bfOObf 62.5$, #bf0000 62.53, 
*bf0000 75$, $0000btf 75$, 
t0000bf 87.5%, 4000000 87.55, 
#000000 10053); 
/* 省 略 -ms, -o,. -moz & A MAMARA /* 
height: 300px; 
margin: 100px auto; 
width: 400px; 


} 
即使 代码 清单 里 已 经 省 略 挥 了 重复 的 厂商 命名 空间 版 本 ， 看 起 来 我 们 还 是 为 实现 这 8 个 坚 问 
条 纹 写 了 一 大 堆 CSS 人 代码。 因为 线性 颜色 渐变 第 一 次 加 入 CSS3 是 在 2008 年 ， 当 时 只 有 Safari 等 基 





5.2 通过 Compass 使 用 CSS3 


<Q 新 版 语法 





T WebKitI ER 00 Vds sc hp, 并 且 还 是 旧版 语法 合 。 而 现在 ,众多 浏览 絮 的 最 新 版 本 支持 的 都 是 


简化 过 的 新 版 语法 个 。 我 们 来 看 看 Compass 中 同样 的 例子 ， 如 代码 清单 5-13 所 示 。 
代码 清单 5-13 ”通过 Compass 实 现 电视 机 测试 图 案 


tpattern { 
Ginclude background( EE 
linear-gradient! 
360deg, 
#bfbfbf 05, 
#bfbflbf 12.5%, 
#bfbf00 12.5%, 
#bfbf00 253, 
#00bfbf 255, 
#00bfbf 37.5%, 
#bfbf00 37.53, 
#00bf00 37.55, 
#00bf00 503, 
tbfOO0bt 503, 
#bf00bË 62.55%, 
#bf0000 62.53, 
#bf0000 753, 
#0000bf 755, 
#0000bf 87.5%, 
#000 87.53, 
#000 1009$))]; 
height: 300px; 
margin: 100px auto 
width: 400px; 
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原来 如 此 ! 使 用 Compass， 你 只 需要 在 样式 表 中 写 4 行 代码 就 完成 之 前 那 段 CSS 所 做 的 事情 。 
通过 Compass 的 CSS3 模 块 中 的 backgrounaq 混 合 需 ， 你 就 可 以 使 用 CSS3 语 法 全 创建 线性 (或 放射 
性 ) 颜色 渐变 ， 并 远离 命名 空间 和 旧版 语法 的 困扰 。 它 不 仅仅 让 你 少 打 了 几 个 字 ， 更 省 得 你 考虑 
那些 语法 ， 让 你 专注 在 设计 上 。 

本 草 进 行 到 这 里 , 我 们 已 经 知道 Compass 如 何 让 CSS3 的 工作 变 得 更 容易 更 有 趣 。 在 本 章 剩 下 
的 篇 幅 里 , 我 们 会 深入 到 一 些 更 高 阶 但 不 太 和 常用 的 CSS3 概 念 当中 ,并 看 一 看 Compass 对 它们 的 文 
持 如 何 。 























5.2.4 HRljefont-faceHx ACE Uk 


找 一 些 你 喜欢 的 报刊 杂志 或 印刷 品 。 想 想 看 上 面 的 品牌 都 是 怎么 印刷 出 来 的 。 它 的 重点 在 于 
在 设计 中 选择 (或 调整 ) 和 使 用 字体 。 不 让 的 是 ， 对 于 Web 设 计 师 来 说 ,我 们 一 直 受 困 于 数 得 着 
的 几 种 有 限 字 体 ， 因 为 我 们 在 设计 中 使 用 的 字体 必须 是 用 户 电 脑 安 装 并 使 用 的 字体 。 我 们 常常 用 
字体 栈 或 字体 列表 来 表示 浏览 旨 在 这 个 页 面 的 这 个 元 泰 上 应 该 使 用 的 字体 的 偏好 顺序 : 

font-family: Georgia, "Times New Roman", serif; 

尽管 efont-face 规 则 早 在 CSS2 就 被 引入 , 但 是 它 只 是 初步 文 持 了 一 个 正中 专属 的 格式 。 最 
近 其 他 浏览 器 已 经 加 入 了 对 OTF、WOFF、SVG 和 TTF 的 支持 ， 所 以 我 们 可 以 为 自己 的 设计 提供 
字体 服务 了 。 但 麻烦 在 于 ， 就 像 其 他 CSS3 模 块 一 样 ， 浏览 右 仍 然 没 有 在 Web 字 体 的 格式 和 CSS 用 
ik EXSGAGCWL. EKA f Compass. 

一 个 小 警告 : 在 通过 efont-face 使 用 任何 字体 之 前 ， 请 检查 其 许可 证 ， 以 确认 你 是 否 有 权 
利 这 么 做 。Font Squirrel 和 Google Web Fonts 都 是 不 错 的 资源 ， 人 免费 义 漂 这 ,你 可 以 合法 地 将 其 极 
人 到 你 的 网 站 中 。 选 中 一 个 字体 后 ， 你 可 以 下 载 一 个 zip 包 ， 里 面 有 所 有 你 为 网 站 提供 字体 服务 
所 需要 的 东西 ， 包 括 用 来 文 持 不 同 浏览 融 的 多 个 字体 文件 和 与 其 字体 泻 染 相对 应 的 CSS3 样 式 表 。 
作为 演示 ， 我 们 将 标题 设置 为 Font Squirrel 的 加 粗 ChunkFive 字 体 ， 如 图 5-5 所 示 。 


This headline is Chunky 


图 5-5 ”非常 适合 做 标题 的 ChunkFive 字 体 
现在 你 已 经 大 体 知道 最 终结 果 了 ， 我 们 看 看 如 何 用 CSS3 实 现 它 ， 如 代码 清单 5-14 所 示 。 


代码 清单 5-14 CSS3 的 ChunkFive 标 题 


Gfont-face { 
font-family: 'ChunkFiveRegular'; 
src: url('Chunkfive-webfont.eot'); «— IE9 


















































src: url('Chunkfive-webfont.eot?hHiefix') -© IE6 2IE8 
formatí'embedded-opentype'), 
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url('Chunkfive-webfont.woff') <O 最 新 的 浏览 器 
format('woff'), 


urlí('Chunkfive-webfont.ttf') «—0 Safari 等 移动 浏览 器 
format('truetype!'), 


urlí('Chunktfive-webfont.svgttChunkFiveRegular') 
aeaa 6 低 版 本 的 iOS 浏 览 器 


Ui zs 
font-weight: normal; DL fn 
font-style: normal; 


I 


HIA 3 hd Slie 1 
font-family: 'ChunkFiveRegular' 
} 


看 起 来 没有 CSS 新 特性 是 不 需要 对 IE 进 行 hack 的 ，@font-face 也 是 如 此 全 和 人 @, 但 是 这 个 
特殊 的 CSS3 特 性 需要 针对 主流 浏览 避 合 和 人 以 及 一 些 低 版 本 移动 浏览 胡 全 进行 更 广 范 的 字体 格 
式 支 持 。 尺 管 Font Squirrel 在 “字体 包 ” 里 提供 了 匹配 不 同 字 体 文件 的 CSS， 这 已 经 很 方便 了 , 但 
是 它 的 样式 表 假 定 你 在 样式 表 所 在 的 文件 夹 里 提供 了 这 个 字体 服务 。 所 以 , 如 采 你 的 字体 放 在 了 
别处 "比如 第 7 章 将 会 提 到 的 资源 主机 ), 那么 你 就 需要 分 别处 理 每 个 声明 过 的 url () 地 址 。 在 此 ， 
Compass 再 次 节省 了 你 的 打字 时 间 ,， 它 人 允许 你 用 更 少 的 代码 创建 相同 的 CSS， 如 代码 清单 S-1$ 所 示 。 


代码 清单 5-15 ”使 用 Compass 中 的 efont-face 


Qimport "compass"; 
Ginclude font-face("ChunkFiveRegular", 
font-files( "Chunkfive-webfont.woff", woff, 
"Chunkfive-webfont.ttf", ttf, 


"Chunkfive-webfont.svg", svg}, 
"Chunkfive-webfont.eot", normal, normal); 


代码 不 仅 更 精简 了 ， 也 更 强大 了 。 这 个 font-files 辅 助 大 完成 了 很 多 工作 。 首 先 ， 它 提供 
了 一 个 快捷 语法 ， 用 于 创建 规则 中 ur1() 和 format () 部 分 。 第 二 ， 可 能 更 重要 的 是 ， 它 建立 了 
基于 Compass 配 置 的 url () 路 径 。 在 开发 环境 下 ,， 它 可 能 是 你 本 地 机 需 的 /fonts 目 录 ; 在 生产 环 
境 中 ， 它 可 能 是 http://assets.example.com/fonts。 我 们 会 在 下 一 半 进 一 步 讨论 Compass 的 这 一 功能 。 









































5.3 通过 CSS PIE 支持 IE 


我 们 本 章 讨 论 的 许多 特性 都 能 被 Firefox 和 基于 WebKit 的 浏览 器 很 好 地 支持 , 但 依然 有 大 部 分 
CSS3 特 性 仍 未 被 除 IE8 及 更 融 版 本 之 外 的 正版 本 支持 。 假 如 一 家 企业 的 浏览 带 被 长 期 锁定 在 老 版 
本 的 了 上 ， 而 你 又 需要 文 持 耻 ,在 这 种 情形 下 你 该 怎么 做 呢 ? 坦 日 地 讲 ， 在 低 厂 本 浏览 硕 里 看 到 
一 些 尖 角 不 是 什么 大 不 了 的 事 ， 就 像 来 自 dowebsitesneedtolookexactlythesameineverybrowser.comy 
的 截图 5-6 一 样 。 














CD 网 址 的 英文 意思 是 :“ 有 必要 让 网 站 在 每 个 浏览 希 里 都 长 得 一 模 一 样 吗 ? ”一 一 译 者 注 
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图 5-6 AUZEA E RET DU Vn EAK 


但 是 当 网 站 可 以 显示 得 不 一 样 时 ，Compass 为 那些 不 想 放弃 经 盟 浏 览 厚 的 用 户 提供 了 一 个 解 
决 方式 。CSS3 Progressive Internet Explorer， 或 CSS3 PIE ， 是 一 个 由 Jason Johnston 创 建 的 项 目 ， 
它 针对 低 版 本 下 提供 很 多 CSS3 特 性 的 polyfill”。 通 过 使 用 专属 于 低 版 本 下 的 HTC behavior，PIE 提 
供 了 很 多 CSS3 特 性 的 完整 或 部 分 支持 。 包 括 : 

Q Border-radius 

Q Box-shadow 

Q Border-image 

口 多 重 至 景 图 片 

Q 线性 颜色 渐变 的 背景 图 

让 我 们 回顾 几 个 5.2 下 讨论 过 的 CSS3 项 目 , 并 找到 PIE 在 低 厂 本 了 正中 文 持 圆 角 和 线性 颜色 渐变 
的 方法 。 比 如 图 $-7 中 的 这 几 个 按钮 。 


Click me | 


图 5-7 ”简单 的 圆 角 按钮 和 背景 颜色 渐变 的 按钮 














(D polyfill 指 在 Web 开 发 中 使 某 个 浏览 器 本 不 支持 的 功能 得 以 实现 的 代码 片段 , 多 用 于 低 版 浏览 器 对 HTML5 新 特性 的 
支持 。 一 一 译 者 注 
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如 我 们 之 前 在 本 章 看 到 的 ， 这 些 按钮 的 路 浏 览 希 CSS 人 代码 虽 然 商 单 却 元 长 ， 如 代码 清单 5-16 
所 示 。 


代码 清单 5-16 用 CSS3 实 现 圆 角 和 颜色 渐变 
.rounded | a— CSS3 Bl fs 


-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
-o-border-radius: 20px; 








-ms-border-radius: 20px; 
border-radius: 20px; 


} 


.gradient { < 二 一 CSS3 线性 颜色 渐变 

background: -webkit-gradient( 

linear, 50$ 03%, 503% 100%, 

color-stopí(0$, #aaaaaa), 

color-stop(100%, #333333)); 
background: -webkit-linear-gradient(taaaaaa, #33323333); 
background: -moz-linear-gradient(taaaaaa, #333333); 
background: -o-linear-gradient(itaaaaaa, 4333333); 
background: -ms-linear-gradient(taaaaaa, #333333); 
-pie-background: linear-gradient(taaaaaa, #333333); 
background: linear-gradient(fsaaaaaa, #333333); 


根据 PIE 文 档 ， 若 想 把 支持 范围 扩大 到 低 版 本 了 正 ， 你 需要 做 一 些小 的 改动 。 首 先 ， 你 需要 为 
网 站 下 载 并 添加 HTC 组 件 。 完 整 的 安装 流程 详 见 PIE 网 站 。 不 过 现在 我 们 假设 你 已 经 把 这 个 文件 
部 署 在 了 /stylesheets/PIE.htc 上 。 接 下 来 ， 你 需要 在 样式 表 里 添加 一 些 额 外 的 规则 ， 如 代 
码 清单 5-17 所 示 。 


代码 清单 5-17 用 CSS3 PIE 实 现 圆 角 和 颜色 渐变 
.rounded, .gradient { Q 应 用 了 PIE 行 为 


behavior: url("/stylesheets/PIE.htc"); 
position: relative: 








.gradient { 
background: -webkit-gradient(linear, 50% 0$, 50$ 100%, 





color-stop(0$, t$aaaaaa)], 
color-stopí100$, 4$333333)); 
background: -webkit-linear-gradient(faaaaaa, #333333); 














background: -moz-linear-gradient(fsaaaaaa, 49333333); 
background: -o-linear-gradient(4saaaaaa, #333333); 
background: -ms-linear-gradient(4aaaaaa, 4333333); 











-pie-background: linear-gradient(tdaaaaaa, 99333333); 











background: linear-gradient(taaaaaa, #333333); 


} 
为 了 让 PIE 介 入 ， 你 需要 应 用 相关 的 元 素 人 @， 再 加 上 position: relative 以 修复 IE 的 bug。 
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接 下 来 ， 为 了 实现 颜色 渐变 ， 你 需要 使 用 一 个 非 标准 的 CSS 属 性 -pie-background 以 告诉 PIE 为 
你 的 按钮 涩 加 一 个 颜色 源 变 的 背景 。 

如 你 所 料 ， 这 些 工作 (包括 安装 ) 在 Compass 里 变 得 更 容易 了 。 你 可 以 通过 命令 行 在 项 目 里 
引入 PIE 资 源 并 展开 一 个 有 完善 文档 的 示例 样式 表 : 

compass install compass/pie 

在 这 个 已 经 具备 PIE 样 式 表 和 HTC 组 件 的 地 方 ， 你 基于 Compass 的 PIE 混 合 需 写 一 点 Sass， 便 
可 以 创建 出 之 前 代码 清单 里 的 CSS， 如 代码 清单 5-18 所 示 。 


代码 清单 5-18 ”使 用 Compass PIE 


aGimport "compass/css3/pie'"; 导入 PIE 














.pie-element ( 
// 默认 就 是 relative， 所 以 写 Felative 是 多 余 的 ， 这 里 刻意 说 明 一 下 。 
Ginclude pie-element(relative); 


j 





.Younded í( 


Ginclude pie; 3— 扩展 pie 元 素 的 class 


Qinclude border-radius(20px); 


} 


.gradient { 
Qinclude pie; 
Qinclude background(linear-gradient(iaaa, 4333)); 


} 
就 这 么 简单 ! 你 导入 了 Compass 的 PIE 模 块 俐 ,然后 将 其 应 用 到 你 的 按钮 当中 合 。 其 他 的 CSS 
部 是 我 们 之 前 看 到 过 的 Compass 的 CSS3 支 持 。 很 明显 ，PIE 更 适合 与 Compass 搭 档 。 








5.4 hz 


在 这 一 章 , 我 们 介绍 了 Compass 如 何 让 撰写 CSS3 更 快 更 有 乐趣 。 你 也 看 到 了 我 们 在 完全 不 需 
要 和 厂商 命名 空间 打交道 的 情况 下 ， 如 何 使 用 Compass 的 CSS3 混 合 器 实现 圆 角 、 创 建 阴 影 、 应 用 
颜色 渐变 以 及 完善 排版 。 我 们 探讨 了 如 何 针 对 浏览 絮 使 用 配置 属性 , 以 及 如 何 使 用 CSS3 PIE 文 持 
低 版 本 的 IE。 

在 下 一 章 ， 我 们 会 看 到 Compass 如 何 自动 把 独立 的 背景 图 片 替 换 成 一 张 图 片 精 录 ， 以 增强 网 
站 的 性 能 。 











来 到 生产 环境 


本 书 的 前 两 部 分 介绍 了 Sass 和 Compass， 及 其 市 来 的 许多 样式 表扬 写 方式 的 转变 。 第 6 草 这 
入 探寻 Compass 在 精灵 方面 的 魔力 。 我 们 会 讲解 使 用 CSS 精 灵 的 原因 并 展示 一 些 简单 而 高 级 的 
精灵 用 例 。 你 将 会 看 到 Compass 如 何 组 合并 测量 你 CSS 中 的 图 片 ， 完 全 目 动 化 地 处 理 精灵 。 同 时 
你 也 会 学 到 如 何 配置 其 布局 、 空 间 、 位 置 、 类 名 ， 等 等 。 

第 7 草 将 介绍 Compass 如 何 让 你 从 本 地 开发 原型 轻松 转移 到 生产 环境 的 网 址 或 Web 应 用 中 。 
你 还 会 知道 如 何 使 用 Compass 的 资源 辅助 奉 ， 让 样式 表 中 所 有 URL 痢 随 着 一 个 向 单 的 配置 项 变化 
而 更 新 。 我 们 还 会 告诉 你 当 Compass 无 法 找到 样式 表 中 引用 的 图 片 时 如 何 发 出 警告 ， 帮 你 杜绝 无 
效 的 图 片 链接 。 节 后 我 们 会 提供 一 些 在 剖 览 背 中 进行 设计 的 建议 ， 以 及 如 何 准备 你 的 样式 表 以 
便 将 其 发 布 到 生产 环境 。 

第 8 草 帮 助 你 实现 样式 表 的 最 佳 性 能 。 你 会 学 到 用 eimport 趾 联 样式 表 ， 以 及 如 何 使 用 
Compass 站 建 的 样式 表 压 缩 并 通过 gzip 压 缩 省 下 载 时 间 。 同 时 你 还 会 学 到 Compass 如 何 提供 对 
资源 主机 的 文 持 来 进行 跨 服 务 侣 的 分 布 式 下 载 ， 也 包括 对 Compass 的 内 联 图 片 和 字体 的 支持 以 
WK/PHTTPTZRAN, mw, dX DIA ATE nr HI EREI RS S Sass "p xt BER ESTE ae r DICH TIE 
REINIE o 

在 这 部 分 的 最 后 ， 你 将 会 得 到 一 张大 的 结 点 图 ， 它 展示 了 Sass 和 Compass 如 何 融 入 你 的 开发 
译 程 。 你 将 了 解 如 何 将 一 个 本 地 开发 环境 平稳 迁移 到 生产 环境 的 Web 服 务 如 上 ， 你 也 会 有 信心 
展示 出 样式 表 的 最 佳 性 能 。 在 下 一 部 分 ， 我 们 会 看 看 Sass 的 高 阶 功 能 ， 然 后 我 们 可 以 把 它们 放 
到 一 起 写成 一 个 Compass 扩 展 并 把 我 们 的 样式 表 共 享 为 一 个 开源 项 目 。 





(D sprite， 指 将 一 个 页 面 涉及 的 零星 图 片 都 包含 到 一 张大 图 中 去 。 一 一 译 者 注 
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本 章 内 容 

Q CSS 精灵 的 历史 和 基本 原则 

O CompassiE 5 ae LETH 2X. A 2116 

口 自 定义 精灵 图 片 和 CSS 输 出 的 高 阶 技巧 





在 这 一 革 ， 我 们 会 关注 CSS 精 灵 的 功能 、 面 临 的 挑战 以 及 Compass 如 何 把 你 从 Web 设 计 最 村 
燥 的 工作 中 解救 出 来 。 

如 果 你 曾经 手动 创建 过 精灵， 相信 你 已 经 乐 在 其 中 了 ! Compass 让 精灵 更 加 容易 。 它 会 创建 
精灵 地 图 ， 撰 写 你 不 愿意 撰写 的 那些 CSS， 并 将 其 无 颖 集成 到 你 的 样式 表 工 作 流 程 中 。 不 过 这 仪 
仪 是 一 个 开始 。 其 至 当 你 需要 Compass 对 创建 精灵 地 图 和 生成 CSS 进 行 更 多 控制 时 ， 操 作 起 来 依 
然 是 不 可 思议 的 从 单 。 

在 这 一 章 ， 我 们 会 深入 研究 一 个 新 的 Compass 项 目 ， 所 以 如 果 你 还 没有 安装 Compass， 请 移 
步 至 附录 B 寻 求 帮助 。 


6.1 精灵 的 工作 原理 


在 早期 CSS 精灵 是 很 简单 的 。 设 计 师 们 会 把 按钮 的 不 同 状 态 做 成 图 片 ， 并 把 它们 做 成 一 张 
单个 图 片 ， 如 图 6-1 所 示 。 











| Go M 
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图 6-1 一 个 简单 的 精灵 地 图 示例 
然后 ， 在 CSS 里 ,他们 会 设置 按钮 的 守 、 融 以 及 背景 图 片 的 属性 ， 并 在 不 同 的 状态 下 改变 背 
景 图 的 位 置 ， 如 代码 清单 6-1 所 示 。 
代码 清单 6-1 简单 精灵 的 CSS 


.go-button { 
width: 75px; height: 45px; 
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background: url('images/sprite-button-usage.png') top left; 
} 
.go-button:hover { background-position: center; } 
.go-button:active ( background-position: right; ) 


按钮 的 尺寸 比 这 张 精 录 地 图 的 尺寸 小 , 它 创 建 了 一 个 视 口 ,通过 这 个 视 口 ， 可 以 让 不 同 的 图 
刻 处 于 这 个 可 视 区 域 。 当 用 户 共 集 其 上 或 点 击 它 时 ,背景 图 片 的 位 置 会 发 生 改变 , 视 口 束 展 示 出 
为 一 张 图 (C 如 图 6-2 所 示 )。 














图 6-2 ”CSS 创建 了 一 个 视 口 


这 是 一 个 早期 的 简单 CSS 精 灵 示 例 。 当 然 这 个 例子 的 未 来 是 非常 光明 的 ， 因 为 我 们 可 以 通过 
CSS3 样 式 创建 美观 的 按钮 ， 再 也 不 需要 精灵 了 。 

当 这 项 技术 第 一 次 流行 起 来 时 , 大 多 数 的 文章 都 把 它 视 为 解决 浏览 需 每 次 获取 下 一 张 图 片 界 
面 都 会 内 烁 的 好 方法 ,仿佛 这 就 是 它 的 优势 所 在 。 其 实 不 然 ， 闪 烁 仅仅 是 Web 性 能 中 看 得 见 的 比 
较 明显 的 一 部 分 ， 而 精灵 的 使 命 是 解决 真正 的 问题 。 


6.2 ”精灵 的 必要 性 


从 按钮 的 精灵 示例 中 ， 你 就 已 经 发 现 精灵 可 以 把 3 个 不 同 的 按钮 图 形 组 合成 一 张 单 图 ， 同 时 
维持 相同 的 呈现 效果 。 如 果 把 这 个 技术 运用 到 更 深 的 层面 , 那么 你 能 构建 出 一 个 几乎 包括 网 站 中 
所 有 背景 图 片 的 大 图 ， 如 图 6-3 所 示 。 
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图 6-3 ”一 个 更 加 高 级 的 精灵 地 图 


但 是 为 什么 要 这 样 做 呢 ? 每 一 张 图 片 部 需要 在 精灵 地 图 里 测量 、 选 位 , 然后 排列 到 你 的 样式 
表 当 中 。 如 采 需 要 重新 设计 ， 那 么 维护 起 来 是 非常 枯燥 寓 力 的 。 

如 果 这 样 做 是 为 了 快速 下 载 图 片 , 那 为 什么 不 把 图 片 好 好 奈 绷 一 下 呢 ? 尽管 压 纳 能 起 到 一 点 
作用 , 但 是 不 管 你 信 不 信 ， 文件 大 小 只 是 问题 的 一 部 分 而 已 。 当 然 , 图 片 压缩 得 越 小 ， 加 载 速 度 
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做 了 什么 。 


6.2.1 HTTP 请 求 越 少 越 好 
当 在 本 地 创建 一 个 网 站 时 ,你 的 浏览 器 通常 可 以 直接 从 硬盘 或 本 地 运行 的 Web 服 务 器 请 求 文 
件 。 在 这 两 种 情况 下 ,你 对 请 求 的 感受 都 是 几乎 瞬间 就 成 功 了 ， 你 绝对 无 法 想象 远程 网 络 连接 时 
下 载 文件 的 痛苦 。 
每 次 你 的 浏览 器 需要 从 服务 器 下 载 一 个 文件 时 ,都 不 得 不 走 完 一 系列 的 步骤。 我 们 用 最 简化 
的 方式 把 它们 列 出 来 : 











(1) 浏览 器 一 一 请 求 服务 器 打开 一 个 传输 套 接 字 
(2) 服务 器 一 一 处 理 请 求 并 作出 回应 

(3) 浏览 器 一 一 确认 服务 器 的 回应 

(4) 浏览 器 一 一 从 服务 需 请 求 数 据 

(5) 服务 器 一 一 处 理 请 求 

(6) 服务 器 一 一 查询 文件 

(7) 服务 器 一 一 初始 化 文件 传输 
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(8) 浏览 器 一 一 接受 文件 传输 

你 的 浏览 各 即 便 得 到 的 是 很 小 的 一 段 数据 ， 都 会 和 服务 右 走 完 所 有 流程 。 所 以 即使 是 一 张 很 
MB ZSHA BUE, Pax cB DHT RIT RS EAS nage). 很 多 现代 
A V as zer RIEF ERIT OC TE E a ON RET SCPER ECT EE XE BE. 但 是 即便 如 此 , 在 网 络 赛 车 
或 类 似 蜂 入 网 络 的 弱 网 络 环境 下 ， 问 题 还 是 尤为 明显 。 记 录 一 下 网 站 请 求 的 所 有 JavaScript、CSS 
文件 和 图 片 ， 很 容易 发 现 这 个 数字 在 快速 增长 。 

这 不 仪 仪 是 浏览 妖 问 的 问题 。Web 服 务 冀 也 需要 做 大 量 的 工作 来 处 理 和 回应 这 些 请 求 。 主 流 
的 网 站 每 秒 可 能 会 处 理 百 万 级 的 请 求 。 这 意味 看 你 的 第 一 个 请 求 和 最 后 一 个 请 求 之 间 可 能 隔 了 数 
以 十 万 计 来 目 其 他 用 户 的 请 求 ， 这 严重 拖 慢 了 页 面 的 加 载 速度 。 每 个 额外 的 请 求 都 会 加 重 Web 服 
务 融 的 负担 ， 降 低 站 点 性 能 ， 增 加 成 本 。 

使 用 CSS 精 灵 可 以 明显 减轻 Web 服 务 需 的 压力 。 它 不 仅仅 是 一 个 好 方法 ， 更 是 高 流量 站 点 的 
最 佳 实践 和 必要 措施 。 但 我 们 要 为 此 付出 什么 呢 ? 确实 , 把 不 同 尺寸 的 图 片 做 成 精灵 并 维护 它们 
的 CSS 位 置 需要 大 量 的 工作 。 


6.2.2 ”手动 处 理 是 一 种 折磨 


我 们 并 没有 了 骗 你 。 如 果 你 不 得 不 手动 创建 并 维护 很 大 的 精灵 地 图 及 其 对 应 的 样式 表 , 你 可 能 
会 狼 挥 。 好 吧 ， 也 许 这 有 一 点 极 端 了 ,但 至 少 是 在 给 你 日 己 增 加 负担 。 

确实 ,精灵 图 厂 能 够 明显 提升 网 站 的 加 载 时 间 , 但 是 每 改变 一 张 图 片 ,你 束 不 得 不 更 新 这 张 
精灵 地 图 。 如 末 需 要 改变 图 片 的 太 才 ,你 就 必须 移动 周 于 的 图 片 ,， 并 引发 其 他 一 系列 网 放 位 置 的 
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改变 ， 你 需要 重新 测量 每 张 图 片 ， 再 将 其 更 新 到 你 的 样式 表 中 。 

很 明显 这 是 Web 设 计 师 和 开发 者 们 想象 得 到 的 非常 枯燥 的 工作 。 所 以 ， 尽 管 应 该 做 ， 还 是 有 
很 多 人 拒绝 去 做 。 有 些 网 站 不 得 不 采用 大 规模 的 精灵 也 是 因为 流量 高 ， 比 如 Amazon.com ( 如 图 
6-4 所 示 )。 
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图 6-4 一 张 来 自 Amazon.com 的 精灵 地 图 


事情 可 以 变 得 更 催 单 一 点 吗 ? 只 要 有 人 愿意 在 蔬菜 上 放 点 芝士 ,那么 我 们 都 可 以 从 更 快 更 高 
效 的 网 站 中 获 益 。 

考虑 到 这 里 我 们 会 发 现 , Mi, HE, EKARA HEN R ERRARE n] A EA A 
目 动 化 完成 的 。 因 此 ， 这 已 经 成 为 近 几 年 的 一 个 热 议 话题 。 

在 网 上 简单 搜索 一 下 ,你 就 可 以 找到 大 量 的 精灵 工具 , 从 命令 行 到 基于 浏览 希 的 应 用 应 有 尽 
有 。 每 个 工具 都 提供 了 不 同 的 功能 和 不 同 程度 的 目 动 化 。 其 中 有 些 工具 是 很 不 错 的 , 但 是 有 一 个 
559 T: 和 工作 流程 的 集成 。 在 这 方面 ，Compass 的 方案 有 看 独特 的 优势 。 



































6.2.3 ”Compass 的 方案 


为 Compass 已 经 集成 到 了 你 的 样式 表 拟 写 流程 中 ， 所 以 它 是 生成 CSS 精 灵 的 理想 搭档 。 你 
在 第 7 章 将 会 看 到 ，Compass 有 一 个 配置 文件 用 来 说 明 网 站 图 片 所 在 的 位 置 ， 因 为 Compass 会 生成 
你 的 CSS， 所 以 它 是 上 自动 化 处 理 精灵 的 理想 搭档 。 

Compass 生 成 CSS 精 灵 的 过 程 如 下 : 

(1) 让 Compass 指 癌 一 个 精灵 的 文件 夹 ; 

(2) 告诉 Compass 摧 写 你 的 精灵 CSS ; 

(3) 编译 你 的 样式 表 。 
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通过 两 行 Sass， 你 就 可 以 告诉 Compass 根 据 一 个 目录 下 的 每 张 图 片 生 成 精灵 ， 测 量 它们 的 尺 
寸 ， 通过 每 个 图 片 的 文件 名 撰写 出 不 同类 名 下 的 背景 位 置 。 当 你 改变 图 片 时 ，Compass 会 目 动 更 
新 你 的 样式 表 ， 生 成 一 个 新 的 精灵 并 在 必要 的 情况 下 更 新 背景 位 置 。 这 几乎 就 是 魔术 啊 ! 








6.3 用 Compass 制作 精灵 


在 这 一 六， 我 们 会 走 进 一 个 简单 Compass 精 灵 项 目 。 在 示例 代码 中 ， 有 一 个 初始 化 的 项 目 供 
你 自行 跟随 学 习 使 用 。 这 个 项 目 已 经 有 了 你 需要 的 一 切 ， 包 括 一 些 来 自 IcoMoon 的 人 免费 图 标 集 
( https://github.com/Keyamoon/IcoMoon--limited- ) 和 Compass 的 logo。, 图 6-5 展 示 了 我 们 最 初 的 样子 。 
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图 6-5 示例 项 目的 设置 


我 们 使 用 PNG 格 式 , 因为 目前 的 Compass 只 生成 PNG 精 灵 文 件 。 这 没什么 大 不 了 的 , 因为 PNG 
是 最 理想 的 精灵 格式 。 现 在 让 我 们 来 看 一 看 它 会 生成 怎样 的 精灵 地 图 。 








6.3.1 创建 一 个 精灵 地 
为 了 将 文件 夹 内 的 图 片 转 为 一 张 精 录 地 图 ， 打 开 screen.scss 并 加 入 代码 清单 6-2 所 示 的 代码 。 
代码 清单 6-2 用 Compass 生 成 一 张 精 录 地 图 


@import "compass/utilities/sprites"; 

dimport "icons/*.png"; 

首先 ， 你 导入 了 Compass 的 精灵 模块 。 然 后 ， 你 使 用 一 个 精灵 导入 语句 告诉 Compass 根 据 
images/icons/ 目 录 下 的 所 有 PNG 图 片 生 成 一 张 精 灵 地 图 。 它 会 在 你 的 图 片 目 录 下 创建 一 个 类 
似 icons-s0cad3f8f97 .png 名 字 的 图 片 ( 如 图 6-6 所 示 )。 
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图 6-6 生成 的 精灵 地 图 〈 部 分 截图 ) 


默认 情况 下 ,精灵 是 坚 疝 排 布 的 。 舟 后 ,我 们 会 学 习 如 何 调 整 精灵 的 布局 、 则 距 ， 以 及 如 何 
对 单个 精灵 和 整个 精灵 地 图 进行 设置 。 但 是 首先， 让 我 们 来 看 看 Compass 如 何 生 成 精灵 的 CSS。 








6.3.2 ”生成 精灵 的 CSS 
Compass 有 两 个 很 顺手 的 混合 从 ， 可 d 为 你 目 动 生成 精灵 的 CSS， 如 代码 清单 6-3 所 示 。 
代码 清单 6-3 ”精灵 混合 器 


@include all-«map»-sprites; 
Qinclude «map»-sprite($name); 


这 里 的 <map> 是 一 个 占 位 符 ， 它 会 被 替换 为 包含 精灵 图 片 的 文件 夹 的 名 称 。 在 本 例 中 ， 它 就 
是 icons。al1-sprites 混 合 锅 会 为 整个 精灵 地 图 撰写 所 有 必要 的 CSS。 而 第 二 个 混合 需 将 会 输出 一 
个 独立 命名 精灵 的 CSS。 这 两 个 混合 需 都 会 随 着 精灵 的 导入 而 创建 ， 因 此 它们 只 能 在 导入 之 后 使 用 。 
我 们 来 看 看 这 两 个 混合 需 是 如 何 工 作 的 。 你 可 以 跟随 学 习 automatic-sprites 目 录 下 的 


all-sprites-mixin 和 single-sprite-mixin 的 代码 示例 。 

















1. all-sprites;jEZ zs 

证 我 们 看 看 Compass 中 生成 所 有 精灵 CSS 的 工具 。 找 到 automatic-sprites/all-sprites-mixin 下 的 
例子 ， 如 代码 清单 6-4 所 示 。 
代码 清单 6-4 ”用 Compass 生 成 一 个 精灵 地 图 

Qimport "compass/utilities/sprites"; 


ü1mport '"xcons/*.png"':s 
Qinclude all-icons-sprites; 


这 个 al 1 = icons = spri tesi Gud cS ax da 中 B REATUS USES LUE 的 CSS 9 如 代码 清 
单 6-5 所 示 。 
代码 清单 6-5 ”生成 的 精灵 CSS ( 简化 过 的 ) 


.icons-sprite, 





.icons-arrow, 
.icons-attachment, 
.icons-box-add, ... { 
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background: url('/images/icons-sO0cad3f8f97.png') no-repeat; 


} 


.icons-arrow { background-position: 0 0; } 
.icons-attachment { background-position: -16px -96px; } 
.icons-box-add { background-position: 0 -64px; } 





为 了 市 省 书本 的 空间 ， 我 们 简化 了 前 面 的 CSS 输 出 ， 实 际 上 它 会 生成 91 行 代码 。 现 在 让 我 们 
TUE EUR WEN ITA: 

(1) 它 为 设置 所 有 来 日 images/icons/ 的 精灵 样式 创建 了 一 个 基础 类 icons-sprite; 

(D 它 为 其 精灵 目录 下 的 每 一 个 文件 名 创建 了 类 ; 

(3) 它 为 所 有 的 精灵 都 增加 了 背景 图 片 ; 

(4) 它 为 所 有 的 精灵 都 增加 了 背景 位 置 。 

默认 情况 下 ，Compass 不 会 设置 这 些 元 系 的 冤 和 高 。Compass 可 以 目 动 生成 精灵 的 尺寸 , 但 
我 们 不 一 定 总 需要 它 。 

要 在 项 目 中 使 用 这 个 CSS ,你 可 以 添加 这 些 精 灵 类 至 HTML 标签 ,或 者 你 更 愿意 使 用 eextena 
(在 第 2 草 里 讲解 过 ) 从 精灵 类 继承 属性 ， 如 代码 清单 6-6 所 示 。 
代码 清单 6-6 ”使 用 @extend 继 承 精灵 的 样式 

.add-button { Gextend .icons-box-add; } 

如 果 你 决定 创建 不 止 一 个 精灵 地 图 ， 可 以 添加 图 片 到 男 一 个 目录 ， 然 后 导入 它们 ， 再 使 用 
al1-sprites 混 合 姑 这 样 就 大 功 告 成 了 。 

2. single-sprite 混 合 器 

这 个 混合 大 将 会 针对 单个 的 精灵 输出 CSS。 找 到 automatic-sprites/single-sprites-mixin 下 的 例 
子 ， 如 代码 清单 6-7 所 示 。 
代码 清单 6-7 ”使 用 single-sprite 混 合 圳 


@import "compass/utilities/sprites"; 
@import "icons/*.png"; 



































.add-button { 
@include icons-sprite(box-add); 


} 
这 将 会 输出 这 个 元 系 样 式 必要 的 CSS， 如 代码 清单 6-8 所 示 。 
代码 清单 6-8 生成 single-sprite 的 CSS 
.icons-sprite, 
.add-button { 


background: url('/images/icons-sO0cad3f8f97.png') no-repeat; 


) 


.add-button { background-position: 0 -358px; } 
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A fsingle-spritelk as. Li M EEN— 2I. ROB TET AEA 
里 。 当 Compass 添 加 background-image 和 background-position 样 式 时 ， 会 直接 使 用 这 些 选 
择 和 项 ， 在 这 个 例子 里 是 .addq-button。 相 比 简 单方 便 的 al1-sprites 混 合 希 ， 这 个 方式 生成 更 
少 的 CSS， 也 让 你 对 输出 有 更 多 的 控制 。 

这 是 一 个 好 的 开始 ， 但 有 时 你 还 需要 对 精灵 的 过 程 进行 更 多 的 控制 。 接 下 来 ， 你 将 会 看 到 
Compass 如 何 让 你 不 费 吹 灰 之 力 完 成 更 多 的 控制 。 











6.4 Big Compass 精灵 











即使 对 于 高 阶 用 户 而 言 ， 用 Compass 生 成 精灵 也 是 非常 简单 的 。 还 记得 那个 独特 的 精灵 导入 
吗 ? 它 做 得 可 不 仅仅 是 生成 一 个 精灵 。 当 Compass 进 行 这 个 独特 的 导入 操作 时 ， 首 先 要 确认 会 影 
响 精 录 和 CSS 生 成 方式 的 配置 变量 列表 。 而 精灵 的 导入 也 会 因为 你 在 Sass 中 对 精灵 的 改动 而 创建 

JE FR TRE Gr s RU RR 

Compass ft HEBR 5 ALAS Fr BYOCTESEBS d FIOR tig d io eU EPAEEE. pas UPRA S ERS 
例子 中 ， 你 从 一 个 名 叫 “icons” 的 文件 夹 导 和 人 了 精灵 ， 而 这 正 是 al1-icons-sprites 混 合 融 名 
字 的 来 源 。 如 果 你 从 散 套 文件 夹 导 人 和信 了 精灵 , 那么 Compass 会 使 用 最 末端 的 包含 精灵 的 文件 夹 名 。 
所 以 aimport "sprites/social/*.png"; 24 "social Hj] Em, iG WU TUB. 
如 此 一 来 ， 即 使 使 用 多 个 精灵 地 图 也 不 会 产生 命名 冲突 。 












































6.4.1” 自 定义 精灵 地 图 


你 可 以 自 定 义 一 个 精灵 地 图 或 通过 其 配置 变量 有 针对 性 地 定义 精灵 。 影 响 整个 精灵 地 图 的 变 
量 的 名 称 以 地 图 名 称 开 头 ， 而 仅 改 变 单个 精灵 的 变量 的 名 称 是 地 图 名 紧 跟 精灵 文件 名 ,如 代码 清 
单 6-9 所 示 。 


代码 清单 6-9 ”变量 命名 表 

$«map»-«property»: setting; 

$«map»-«sprite»-«property»: setting; 

在 我 们 的 示例 项 目 中 ,精灵 文件 夹 的 名 称 是 “icons”， 所 以 改变 间距 的 变量 被 命名 为 
Sicons-spacing o I] T i* E icons/attachment . png 间距 变量 你 y 该 WR fH 给 
Sicons-attachment-spacinge 

记 住 ， 这些 变 量 必须 在 导入 精灵 之 前 被 定义 ,否则 不 会 生效 。 请 找到 configuring- 
automatic-sprites 文 件 夹 下 精灵 配置 的 示例 代码 。 

1. 配置 精灵 间距 

Compass 人 允许 你 通过 配置 精灵 间距 变量 改变 精灵 的 间距 : 


$«map»-spacing: Opx; 
$«map»-«sprite»-spacing: 0px; 
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默认 值 是 opx， 这 意味 着 每 个 精灵 被 拼 和 人 精灵 地 图 时 不 融 任 何 间距 。 设 置 这 个 变量 或 单独 给 
每 个 精灵 赋值 ,会 使 得 每 个 精灵 在 拼合 时 在 周围 增加 大 干 像素 的 透明 间距 。 这 段 示例 代码 可 以 在 
comfiguring-automatic-sprites/spacing 文 件 夹 找到 ， 如 代码 清单 6-10 所 示 。 


代码 清单 6-10 ”配置 精灵 间距 


Sicons-spacing: 4px; 
Sicons-arrow-spacing: 12px; 


这 就 意味 着 你 为 icons 精 灵 地 图 中 每 个 精灵 设置 了 4 像素 的 透明 间距 , 并 单独 为 arrow 精 灵 设 置 
12 像 素 的 透明 间距 。 图 6-7 展 示 了 精灵 地 图 的 变化 。 











默认 精灵 地 图 ”增加 间距 的 精灵 地 图 
gQcompass Qcompass 
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图 6-7 精灵 地 图 的 间距 对 照 


当 小 精灵 被 用 在 大 尺寸 元 条 的 背景 中 时 ,间距 是 格外 有 用 的 。 如 果 没 有 间距 ,小 精灵 边 上 的 
其 他 精灵 可 能 就 会 露出 来 。 

2. 设置 精灵 的 重复 性 

在 一 些 情况 下 , 精灵 地 图 中 水 平方 向 的 重复 精灵 会 有 大 用 人 处。 为 此 , 你 可 以 设置 精灵 的 重复 


性 变量 : 














$«map»-repeat: no-repeat/repeat-x; 
$«map»-«sprite»-repeat: no-repeat/repeat-x; 


其 默认 值 是 no-repeat， 但 是 你 可 以 将 其 改 为 repeat-x 使 其 在 整个 x 轴 平 铺 。 这 一 设置 可 
以 用 在 整个 精灵 地 图 上 上， 也 可 以 用 在 某 个 单独 的 精灵 上 。 这 段 示例 代码 可 以 在 configuring- 
automatic-sprites/repeat 中 找到 ， 如 代码 清单 6-11 所 示 。 
代码 清单 6-11 设置 精灵 的 重复 性 

Sicons-arrow-repeat: repeat-x; 

这 导致 箭头 图 标 横 向 平 铺 整个 图 片 。 从 图 6-8 中 我 们 可 以 看 到 ， 重 复 的 箭头 图 标 横 跨 整个 精 
灵 地 图 和 最 党 的 compass 的 logo 对 齐 。 
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图 6-8 重复 的 第 头 图 标 


Compass 发 布 时 还 不 文 持 跨 y 轴 的 图 片 重复 。 

接 下 来 我 们 看 一 看 如 何 设 置 偏 移 位 置 。 

3. 设置 精灵 的 位 置 

有 的 时 候 ， 移 动 一 个 精灵 的 位 置 是 非常 有 帮助 的 。Compass 人 允许 你 通过 设置 位 置 变 量 来 模 问 
移动 图 片 : 


$«map»-position: 0px; 
$«map»-«sprite»-position: Opx; 


poT Eu ERRAR Dog. ROSUATHAJOpx, MRA BERT d EAOJIJE 
o 这 个 值 可 以 是 百分比 , 也 可 以 是 像 系 值 。 下面 设 置 的 例子 可 以 在 configuring-automatic-sprites/ 
Violin 找到 ， 如 代码 清单 6-12 所 示 。 


代码 清单 6-12 设置 精灵 的 位 置 


Sicons-position: 4px; 


























Sicons-arrow-position: 100%; 
在 这 个 例子 里 ， 图 标 精灵 地 图 中 的 每 个 精灵 都 被 石 移 了 4 个 像素 ,并且 季 头 精 灵 移 动 到 了 最 
右边 ， 如 图 6-9 所 示 。 





Jg compass 


e 
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图 6-9 ”精灵 位 置 示例 


接 下 来 ， 我 们 会 讲解 完全 改变 精灵 地 图 布局 的 方式 。 
4. 设置 精灵 地 图 的 布局 
Compass 有 以 下 几 种 精灵 的 布局 可 供 选 择 : 


QN 
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$«map»-layout: vertical/horizontal/diagonal/smart; 

默认 的 布局 是 vertical， 从 整体 上 影响 精灵 地 图 布局 ， 告 知 Compass 如 何 排 布 所 有 的 精灵 。 
大 多 数 情况 下 ， 你 可 能 需要 将 布局 设置 为 smart， 这 种 布局 会 让 Compass 产 生 最 小 的 空白 区 域 。 
下 面 的 代码 示例 可 以 在 configuring-automatic-sprites/layout 文 件 夹 中 找到 ， 如 代码 清单 6-13 所 示 。 


代码 清单 6-13 ”智能 精灵 布局 
Sicons-layout: smart; 


如 采 最 开始 你 就 在 这 个 项 目 中 使 用 了 智能 布局 ， 那 么 精灵 地 图 看 起 来 会 是 图 6-10 的 样子 。 
Pona 
na 


*e >OP 


gcompass 
图 6-10 智能 布局 的 精灵 地 图 


位 置 和 重复 性 的 设置 只 会 应 用 到 模 癌 或 纵 癌 布局 的 精灵 地 图 中 。 对 于 采用 智能 布局 或 对 角 线 
布局 的 精灵 地 图 ， 位 置 和 重复 性 的 设置 是 无 效 的 。 

接 下 来 ， 我 们 会 看 一 看 Compass 如 何 移 除 过 期 的 精灵 地 图 。 

5. 清除 过 期 的 精灵 地 图 

当 添 加 、 删 除 或 改变 图 片 后 , 会 生成 新 的 精灵 地 图 。Compass 会 日 动 为 你 移 除 旧 的 精灵 地 图 ， 
或 者 你 也 可 以 把 它们 保留 下 来 : 

$<map>-clean-up: true/false; 

默认 情况 下 ， 当 生成 新 的 精灵 地 图 时 ，Compass 会 自动 把 旧 的 移 除 。 这 会 避免 你 的 硬盘 被 不 
再 使 用 的 文件 填 满 ,同时 也 确保 你 不 会 困惑 自己 的 样式 表 到 底 在 使 用 哪个 文件 。 如果 你 喜欢 手动 
移 除 旧 的 精灵 地 图 ， 你 也 可 以 将 其 设置 为 false。 

到 此 为 止 ， 我 们 知道 了 如 何 修改 Compass 生 成 精灵 地 图 。 接 下 来 ， 我 们 看 看 如 何 目 定义 
Compass 生 成 的 CSS 代 码 。 
































6.4. ” 目 定 义 精 灵 的 CSS 


你 已 经 知道 Compass 在 精灵 地 图 中 布置 图 片 是 多 么 方便 。 尺 管 这 些 精灵 地 图 的 改变 必然 会 影 
啊 Compass 最 终生 成 的 CSS， 这 里 还 是 有 一 些 办 法 让 你 卫 接 目 定 义 生 成 的 CSS。 

1. 输出 精灵 的 尺寸 

如 果 你 想 要 给 一 个 特殊 的 精灵 设置 尺寸 ， 你 可 以 使 用 精灵 尺寸 的 辅助 器 : 














«map»-sprite-height($name) 
«map»-sprite-width ($name) 
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EE ， 如 代码 清单 6-14 所 示 。 


代码 清单 6-14 包含 精灵 尺寸 


@import 'zeons/*.png': 

.Hext 1i 
Qinclude icons-sprite(arrow); 
width: icons-sprite-width(arrow); 
height: icons-sprite-height(arrow); 


} 


.add-button { 
@include icons-sprite(box-add); 


} 

另外 ,如 末 你 想 要 为 精灵 地 图 中 的 每 个 精灵 目 动 设置 太 寸 , 你 可 以 为 这 个 精灵 地 图 设置 一 个 
配置 变量 。 

$«map»-sprite-dimensions: true/false; 

SA EXE false, HAKEN trug MERRER RRI EG 2828 vef AE, AUI 
清单 6-15 所 示 。 


代码 清单 6-15 包含 精灵 尺寸 


$icons-sprite-dimensions: true; 
@import "icons/*.png"; 
.next { @include icons-sprite(arrow); } 


产生 的 CSS 如 代码 清单 6-16 所 示 。 
代码 清单 6-16 ”生成 带 精 灵 尺 寸 的 CSS 


.next { 
background-position: 0 -70px; 
width: 32px; 
height: 32px; 

} 

.add-button { 
background-position: 0 -358px; 
width: 32px; 
height: 32px; 

j 


相 比 起 手动 设置 精灵 的 尺寸 , 自动 生成 它们 是 如 此 美好 。 不 过 如 采 所 有 的 图 标 都 是 相同 的 尺 
T, 那么 为 每 一 个 精灵 注 明 尺寸 会 让 CSS 显 得 腕 肿 。 为 此 ,我 们 可 以 为 精灵 地 图 的 基础 类 手动 设 
EON. 

2. 精灵 的 基础 类 

Compass 可 以 方便 地 通过 生成 一 个 基础 类 为 每 个 精灵 应 用 普通 样式 。 你 可 以 设置 基础 类 变量 
来 选择 你 的 所 属 类 名 称 : 
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$«map»-sprite-base-class: ".class-name"; 

当 你 使 用 全 部 精灵 或 单独 精灵 的 混合 器 时 ，Compass 会 输出 一 个 精灵 的 基础 类 ， 并 且 其 选择 
佑 还 会 串联 所 有 设置 了 background-image 属 性 的 选择 各 ,每 个 精灵 地 图 的 基础 类 都 以 其 文件 夹 
的 名 字 命 名 。 如 果 精 灵 文 件 夹 的 名 字 是 “icons”， 则 精灵 地 图 的 基础 类 就 是 .icons-sprites。 
让 我 们 看 看 你 会 如 何 改 变 它 ， 如 代码 清单 6-17 所 示 。( 这 个 例子 在 configuring-automatic-sprites/ 
base-class 文 件 夹 里 。) 


代码 清单 6-17 ”改变 精灵 的 CSS 基 础 类 


$icons-sprite-base-class: ".spritey-mcspriterson"; 











@import "icons/*.png"; 


.Spritey-mcspriterson { 
overflow: hidden; 

} 

.next { 
Qinclude icons-sprite(arrow); 


} 
每 个 精灵 类 部 扩展 了 基础 类 。 所 以 你 深 加 到 基础 类 的 任何 样式 都 会 影响 你 的 每 一 个 精 录 ， 如 
代码 清单 6-18 所 示 。 


代码 清单 6-18 "ER E E X AERIIZSHJCSS 


.Spritey-mcspriterson, 
.next { 
background: url('/images/icons-sO0cad3f8f97.png') no-repeat; 
} 
.Spritey-mcspriterson, .next { 
overflow: hidden; 
} 
.next { 
background-position: 0 -70px; 
} 


记 住 ， 输 出 的 CSS 中 仅 有 基础 类 发 生 改 变 。 变 量 名 、 函 数 和 混合 需 依然 是 相同 的 ， 它 们 的 名 
字源 于 精灵 地 图 的 文件 夹 。 

3. 魔术 精灵 选择 器 

Compass 可 以 通过 伪 选 择 融 目 动 牛 成 精灵 的 CSS， 但 是 如 果 需 要 的 话 ， 你 可 以 禁用 它 : 

$disable-magic-sprite-selectors: true/false; 

魔术 精灵 选择 需 是 默认 开局 的 , 也 就 是 说 Compass 在 精灵 时 会 根据 以 ”hover”” active" 
或 _target 结 尾 的 名 了 H 动 输 出 CSS 的 : hovers : activedll : target HEER 这 一 节 的 代码 在 
configuring-automatic-sprites/magic-selectors 文 件 夹 里 。 

例如 ， 如 采 你 想 要 为 正常 和 芒 仿 状态 设置 不 同 的 精 录 ， 那 么 就 在 你 的 精灵 文件 夹 里 加 入 
arrow.png 和 arrow_hover.png，Compass 就 会 为 悬 停 的 伪 类 生成 CSS 精 灵 的 背景 , 如 代码 清单 
6-19 所 示 。 
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代码 清单 6-19 ”生成 魔术 伪 选 择 人 各 的 CSS 


.next { 
background-position: -32px 0; 
} 
.next:hover, .next.arrow-hover { 
background-position: -48px -96px; 
} 


如 果 麻 术 伪 选择 融和 你 选择 的 图 片 命 名 表 冲 突 ， 请 设置 为 Lrue 从 而 对 所 有 精灵 地 图 禁用 这 
个 功能 。 


6.5 驾驭 精灵 辅助 器 


至 此 ， 我 们 已 经 看 过 了 自动 生成 精灵 地 图 和 CSS 的 工具 ， 以 及 一 些 日 定义 输出 的 选项 。 在 多 
数 情 况 下 ， 这 些 魔 术 般 的 混合 噩 可 以 满足 你 的 所 有 需求 。 但 是 你 偶尔 也 需要 抛 开 这 些 东 西 亲 目 
动手 。 

为 了 达到 生成 精灵 的 上 日 的 ，Compass 依 全 了 一 些 辅 助 妖 函数 。 通 过 对 其 深入 了 解 ， 在 制作 精 
灵 时 你 会 有 更 大 的 把 握 和 施展 空间 。 








6.5.1 创建 精灵 地 图 


如 你 旱 些 时 候 看 到 的 ， 创建 一 个 特定 输入 的 精灵 地 图 ， 如 eimport "icons/*. png"; Jf 
不 仅仅 是 创建 了 一 个 精灵 地 图 ; EXISTAT OO ESURIVREHATHI 0 E Y IG MERE Es UAR HT 
灵 辅 助 带 ， 就 不 必 使 用 这 些 变量 和 混合 种 ， 否 则 会 造成 精 录 导入 的 大 材 小 用 。 取 而 代 之 的 是 
sprite-map!/fH/gz&. 来 看 -看 manual-sprites/sprite-helper 的 代码 示例 : 











sprite-map($glob, ...) 

这 个 辅助 带 接 收 了 一 组 类 似 "icons/* .png" 的 图 片 ， 以 及 设置 精灵 地 图 或 单独 精灵 的 可 选 
关键 字 参 数 。 这 里 有 几 个 例子 ， 如 代码 清单 6-20 所 示 。 
代码 清单 6-20 sprite-map 辅 助 央 

$icons: sprite-map("icons/*.png", Slayout: smart); 

EZA 8—4 488 («BT oc RAI, FERRE FEURLIA HAS SiconsZE EE. RIIA 
后 会 在 其 他 的 辅助 硕 里 用 这 个 变量 生成 CSS， 如 代码 清单 6-21 所 示 。 
代码 清单 6-21 sprite-map 辅 助 大 一 一 设置 一 个 单独 的 精灵 

$icons: sprite-map("icons/*.png", $arrow-spacing: 5px); 

任何 精灵 地 图 或 单独 精灵 的 属性 都 可 以 配置 , 仅 使 用 我 们 早 些 时 候 提 到 的 去 掉 <map> 命 名 空 
间 的 配置 变量 。 你 可 以 使 用 $repeat 蔡 代 $<map>-repeat 的 重复 性 配置 ; 也 可 以 使 用 
sarrow-repeat 替 代 $<map>-<spri te>-repeat, 这 里 的 “arrow” 是 你 配置 的 精灵 的 名 称 。 
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6.5.2 ”撰写 精灵 的 CSS 


在 Compass 为 你 生成 精灵 地 图 之 后 ， 你 仍然 需要 写 出 每 个 精灵 的 CSS。 为 此 ， 我 们 将 转 癌 一 
些 其 他 的 辅助 硕 和 混合 硕 。 

1. sprite 辅 助 器 

sprite 辅 助 絮 使 得 撰写 精灵 的 CSS 非 常人 简单 : 

sprite($map, $sprite, [S$offset-x], [$offset-y]) 


spzrite 辅 助 器 需要 精灵 地 图 、 精 灵 的 名 字 以 及 可 选 的 偶 移 坐标 ， 如 代码 清单 6-22 所 示 。 
代码 清单 6-22 sprite Bs 


$icons: sprite-map("icons/*.png"); 
.next 4 
background: sprite($icons, arrow) no-repeat; 
} 
.add-button { 
background: sprite($icons, box-add) no-repeat; 


} 
这 仅仅 会 输出 背景 属性 ， 而 不 会 成 为 一 个 精灵 的 基础 类 或 其 他 任何 你 不 需要 的 CSS， 如 代码 
清单 6-23 所 示 。 


代码 清单 6-23 ”sprite 辅 助 顺 的 CSS 


.next ( 
background: url('/images/icons-s943de15a54.png') 0 -70px no-repeat; 


} 
.add-button { 
background: url ('/images/icons-s943de1l15a54.png') 0 -358px no-repeat; 


} 

精灵 基础 类 的 一 个 优点 是 你 只 需 赋 值 一 次 背景 图 片 ; 在 这 里 它 会 赋值 给 每 一 个 类 ,而 这 是 不 
必要 的 重复 。 

2. 设置 精灵 的 位 置 

为 了 移 除 重 复 的 背景 图 片 ， 你 可 以 用 sprite-position 辅 助 右 或 sprite-background- 
position 混 合 硕 取代 sprite 辅 助 硕 。 示 例 代 但 存放 在 manual-sprites/sprite-position 文 件 夹 : 


sprite-position($map, $sprite, [S$offset-x], [Soffset-y]) 
sprite-background-position($map, $sprite, [S$offset-x], [Soffset-yl) 


这 里 的 辅助 融和 混合 硕 都 需要 一 个 精灵 地 图 、 精 灵 的 名 称 以 及 可 选 的 位 置 侦 移 量 ， 如 代码 清 
单 6-24 所 示 。 
代码 清单 6-24 设置 精灵 的 位 置 

Sicons: sprite-map("icons/*.png"); 


.Sprite-base { background: Sicons no-repeat; } 
.next { 
































Qextend .sprite-base; 
background-position: 
} 
.add-button { 


@extend .sprite-base; 


Sprite-position($icons, arrow); 


Qinclude sprite-background-position($icons, box-add); 


} 


sprite-posi tion HL gs f Ssprite-background-posi tion 混 合 需 都 做 了 相同 的 工作 ， 
至 于 用 哪个 是 个 人 偏好 问题 ， 如 代码 清单 6-25 所 示 。 


代码 清单 6-25 ”设置 精灵 位 置 的 CSS 


.Sprite-base, .next, .add-button { 
background: 


} 





url('/images/icons-s943del5a54.png') no-repeat; 


.next { background-position: 0 -70px; ) 
.add-button { background-position: 0 -358px; } 


在 这 里 你 可 以 看 到 CSS 是 如 此 简单 。 你 有 更 大 的 灵活 度 ， 且 不 必 重 复 。 不 过 最 好 能 再 加 入 精 
ABS. 


3. 设置 精灵 的 尺寸 
为 包含 精灵 的 尺寸 信息 ， 你 可 以 使 用 sprite-dqimensions 混 合 需 ， 它 需 要 精灵 地 图 和 精灵 


的 名 字 , 并 输出 经 过 测量 的 尺寸 ,该 混合 问 的 代码 示例 在 manual-sprites/sprite-dimensios` 文 件 夹 中 ， 
如 代码 清单 6-26 所 示 。 





代码 清单 6-26 sprite-dimensions]R t f$ 


Sicons: sprite-map("icons/*.png"); 
.Sprite-base { background: $icons no-repeat; } 
.next { 

@extend .sprite-base; 

Qinclude sprite-background-position(S$icons, 

Qinclude sprite-dimensions($icons, 


} 


arrow); 
arrow); 




















这 个 辅助 硕 会 测量 精灵 并 在 生成 的 CSS 中 写 明 其 宽 和 高 的 属性 ， 如 代码 清单 6-27 所 示 。 
代码 清单 6-27 sprite-dqimensions 混 合 器 输出 的 CSS 


.Sprite-base, .next { 

background: url('/images/icons-s943de15a54.png') no-repeat; 
} 
.next { 


background-position: 0 -70px; 
height: 32px; 
width: 32px; 
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以 上 就 是 所 有 的 内 容 了 。 有 了 这 些 功 能 和 灵活 性 ， 你 应 该 不 再 担心 在 Web 设 计 项 目 中 加 入 精 
x IE, 


6.6 小结 


在 本 草 ， 我 们 看 到 了 精灵 的 由 来 以 及 它们 在 Web 设 计 中 的 重要 作用 。 我们 了 人 解 了 从 远程 服务 
礁 加 载 大 量 图 片 对 性 能 的 影响 以 及 精灵 如 何 作 为 重要 方法 解决 高 流量 网 站 问题 。 我 们 还 看 到 了 
Compass 如 何 完 全 自动 化 处 理 精 录 ， 并 探索 了 配置 及 控制 Compass 生 成 精灵 地 图 和 CSS 的 几 种 
方式 。 

在 下 一 草 ， 我 们 会 看 到 一 些 高 阶 的 Compass 特 性 ， 它 们 会 帮助 你 做 好 生产 环境 的 准备 工作 。 




















从 原型 到 产品 


本 章 内 容 

口 生成 资源 URL 的 最 佳 实践 

O 撰写 无 需 Web 服 务 如 的 样式 表 
O 在 浏览 可 中 进行 设计 的 技巧 
口 如 何 为 产品 编译 并 构造 样式 表 


网 站 可 以 如 此 简单 ， 一 个 小 孩 用 一 个 编辑 器 和 主机 账号 , 在 几 分 钟 之 内 就 能 轻松 建立 一 个 网 
Ah. CHER Y. 网 站 也 可 以 很 复杂 , 拥有 动态 的 内 容 , 每 天 需要 承载 上 百 万 的 访客 。 很 负责 任 地 讲 ， 
Web 是 涉及 专业 软件 技术 领域 最 广阔 的 地 方 之 一 。 从 你 的 中 学 主页 到 Google，Web 可 以 在 每 一 层 
进行 优化 。 

Web 之 所 以 复杂 并 不 仅仅 因为 HIML 标 记 。 它 的 复杂 性 更 多 取决 于 其 重度 依赖 的 外 部 资源 ， 
比如 图 片 、 其 他 CSS 文 件 、 字 体 以 及 样式 表 ， 它 们 都 成 为 沉重 的 维护 负担 。 

在 本 章 ， 你 会 学 到 如 何 利 用 Compass 辅 助 器 和 配置 来 生成 你 的 资源 URL， 使 其 方便 地 在 原型 
和 产品 之 间 转 换 。 通 过 使 用 这 些 辅助 器 函数 ， 你 可 以 自由 地 押 写 样式 表 和 HTML 而 无 需 Web 服 务 
器 ， 这 省 去 了 很 多 令 人 头疼 的 工作 。 同 时 ， 你 也 是 在 为 下 一 曹 提 到 的 性 能 优化 措施 搭建 舞台 。 

有 了 CSS3 的 改进 以 及 Sass 和 Compass 的 强大 理念 ， 现 在 是 时 候 重新 评 佑 你 的 设计 和 原型 的 工 
具 链 了 。 我 们 的 讲解 会 涵盖 一 些 在 浏览 锅 中 进行 设计 的 基本 技巧 ， 从 而 使 你 判断 ， 从 长 期 来 看 ， 
Photoshop 之 类 的 工具 是 否 拖 慢 了 你 的 节奏 。 

在 CSS 里 , 你 已 经 习惯 于 通过 搜索 & 蔡 换 技巧 使 样式 表 由 原型 转变 到 产品 。 在 第 3 草 , 你 学 过 
了 有 关 Compass 的 一 些 描述 资源 存放 位 置 和 服务 方式 的 配置 选项 。 在 本 章 ， 你 会 学 到 如 何 使 用 这 
些 简 单 的 配置 选项 外 加 一 些 殷 写 上 的 最 佳 实践 消除 产品 部 署 时 的 疑 愿 ， 同 时 允许 你 简化 开发 环 
境 。 你 还 会 看 到 如 何 处 理 版 权 提示 、 源 人 码 控制 之 类 的 无 聊 问 题 。 

然后 , 在 下 一 童 ， 你 会 学 到 性 能 优化 的 相关 内 容 ， 从 增强 样式 表 性 能 的 每 处 细 世 出 发 ， 比 如 
通过 压缩 和 图 片 内 联 等 。 但 是 最 先 要 做 的 事情 是 ， 让 我 们 看 看 Compass 生 成 URL 和 得 出 原型 的 最 
佳 实践 。 
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7.1 绝对 URL 


你 的 图 片 和 都 在 哪里 ” 这 听 起 来 像 一 个 电码 的 问题 。 你 的 图 片 不 就 在 你 的 项 目 文 件 夹 里 么 ? 是 
的 ， 你 很 容易 找到 它们 ， 因 为 你 是 人 类 。 如 采 你 旦 一 亚 Web 浏 览 希 ， 找 到 它们 可 能 就 避 点 劲 了 。 
这 些 图 刻 从 你 项 目的 图 片 文 件 夹 里 开始 了 人 它 的 一 生 , 但 是 它们 待 会 儿 可 能 会 被 打包 、 复 制 、 部 署 、 
WEE. URLECE, K, ZF, RARER -REENER 

对 于 一 个 项 目 来 说 ,频繁 改变 图 片 的 存放 位 置 和 存储 方式 是 难免 的 。 当 你 使 用 Compass 时 ， 
你 将 会 发 现 生 成 和 改变 图 片 变 得 更 容易 了 ,但 它 的 优点 还 不 仪 限 于 此 。Compass 为 你 生成 URL 的 
同时 ， 也 确认 了 图 片 是 真实 存在 的 ， 且 避免 浏览 硕 缓 人 存 旧 的 图 片 。 

















7.1.1 生成 URL 资 源 


CSS 提 供 了 ur1 旺 数 用 来 解 公 URL: 

background-image: url('/logo.png'); 

URL 标 识 了 资源 在 互联 网 上 的 位 置 , 但 是 当 你 对 照 自己 的 资源 时 ,你 常常 使 用 相对 URL, 是 
浏览 三 会 根据 其 对 当前 请 求 的 了 解 补 齐 别 的 信息 。 在 进入 后 续 内 容 之 前 ， 证 我们 回顾 一 些 URL 
相关 术语 ， 如 图 7-1 所 示 。 











绝对 URL 


相对 于 协议 的 URL 








| 

| 

相对 于 根 目 录 的 URL | 
相对 URL 

— 

http://www.example.com/images/logo.png?123456789 

| | | | | 


协议 域名 路 径 查询 

















图 7-1 分 解 URL 
在 CSS 中 ， 根 据 可 和 省略 的 部 分 ，URL 可 以 按 四 种 方式 进行 设 定 ， 如 表 7-1 所 示 。 


表 7-1 四 种 类 型 的 URL 





url('http://www.example ”绝对 URL 与 请 求 来 源 无 关 
.com/logo.png') 
url('logo.png') 相对 URL 浏览 器 相对 于 请 求 的 来 源 补 齐 URL， 这 里 的 来 源 指 的 是 CSS 样 式 表 ， 





而 不 是 网 页 。 所 以 如 果 样 式 表 是 http:/www.example.comystylesheets/ 
application.css , Jj A ix ^ URL 4 1& [n] http://www.example.com/ 
stylesheets/logo.png 
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(5€) 
不 例 类 型 描 述 

url('/logo.png') 相对 于 根 目 ”浏览 需 相 对 于 CSS 样 式 表 的 协议 和 域名 补 齐 URL。 所 以 如 采样 式 表 是 
录 的 URL http://www.example.com/stylesheets/application.css, 那么 这 个 URL 会 指 

mjhttp://www.example.com/logo.png 
o / A 相对 于 协议 DAAM ERA FURL, 但 采用 和 CSS 样 式 表 原始 请 求 相同 
ogo.png' PME — S T Senny” 
dn 的 URL 的 协议 。 当 资源 服务 来 自 于 和 你 域名 不 同 的 网 站 时 ,这 类 URL 尤 其 管 
用 。 所 以 如 果 样 式 表 是 https:/www.example.com/stylesheets/ 
application.css , 那么 这 个 URL 会 指 右 https://imgs.example.com/logo.png 


虽然 在 Sass 里 你 可 以 继续 使 用 其 中 任何 类 型 的 URL， 但 Compass 的 最 佳 实践 是 通过 资源 辅助 
f& PKZ ( http://compass-style.org/reference/compass/helpers/urls/ ) 引用 你 的 资源 。Compass 提 供 了 
三 个 质 源 辅助 硕 ， 每 个 辅助 硕 都 需要 你 传人 相对 于 资源 类 的 目录 的 路 径 〈 千 万 不 要 相对 于 样式 
K ): 





L] image-url('logo.png') 一 一 引用 保存 于 图 片 根 目 录 的 1ogo . png 文 件 ; 

ü font-url('arial.ttf' ) 一 一 引用 保存 于 字体 根 日 录 的 arial. ttfE 文 件 ; 

Q stylesheet-url('randomfile.xml') 一 一 引用 保存 于 css 根 目录 的 randomfile.xml 

Xf. 

fy n] B6 DE X xx A JavaScript HJ URL 488 HJ 2$, JavaScript Er EEFE, DO 
Compass?) 展 可 以 提供 JavaScript 文 件 作 为 它们 安 闻 程序 的 一 部 分 。 同 理 , 这 里 没有 针对 sass 目 录 
的 UREL 生 成 项， 因为 这 是 开发 环境 中 的 东西 ; stylesheet_ur1 将 会 指 癌 你 的 CSS 文 件 存在 的 
地 方 。 

Compas 之 所 以 选择 这 样 的 方式 是 因为 它 让 导入 和 提炼 工作 变 得 更 简单 。 如 你 即将 看 到 的 ， 
用 这 种 单一 的 语法 可 以 生成 CSS 文 持 的 所 有 四 类 URL。 

你 的 项 目 配置 告诉 Compass 在 哪里 可 以 找到 你 的 资源 ， 所 以 你 可 以 不 必 关 心 如 何在 样式 表 中 
引用 它们 ， 并 且 把 样式 表 从 原型 到 产品 产生 的 改变 限定 在 了 配置 当中 。 

稍 等 ， 还 有 别 的 ! Compass 还 会 在 每 次 编译 时 确认 你 的 URL 是 否 有 效 | 














7.1.2 ”避免 出 现 死 链 


你 是 人 类 ， 是 人 就 会 犯错 。 可 能 是 错字 ,也 可 能 是 图 片 重 命 名 后 忘 了 引用 。 这 些 都 是 在 所 难 
人 饮 的 ,不必 过 分 可 史上 自 己 。 当 你 使 用 image-url ($path) 8 Has ES | HH— SKI] Fr HT, Compass 
会 确认 这 个 文件 是 否 存 在 ; 如 果 不 存在 ， 则 会 在 编译 时 从 命令 行 打印 出 一 个 警告 。 同 理 ， 使 用 
font-url ($path) 辅助 融 找 不 到 字体 文件 时 也 会 有 警告 出 现 。 

观察 下 面 这 个 找 不 到 图 片 的 Compass 编 译 输出 。 在 你 的 命令 行 里 ，wWARNING 这 一 行 应 该 是 红 
色 的 : 


[-/Projects/my compass project] compass compile 
directory stylesheets/ 
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create stylesheets/ie.css 
WARNING: 'missing.png' was not found (or cannot be read) in images/ 
create stylesheets/main.css 
create stylesheets/print.css 


"4/5, Compass K Pr EHA EREA RAMIE. MERN Au PE n RE EE 
SEEN BI vh ea, , [BEAL fr] AE D. AN i T SEHR T AERE RI E ILER 比如 图 片 显 示 不 出 来 ) 
的 你 节省 了 不 少时 间 。 

说 到 开发 时 的 第 见 错误 , 你 是 否 兽 经 花费 十 多 分 钟 去 排查 图 片 没 有 正确 显示 的 原因 ,最 后 却 
发 现 是 浏览 器 缓存 的 问题 ?我 们 在 开始 使 用 Compass 生 成 URL 之 前 都 有 过 这 种 经 历 吧 。 接 下 来 我 
们 看 看 为 什么 。 




















7.1.8 ”通过 缓存 清理 避免 旧 图 片 


在 开发 和 发 布 产品 阶段 容易 遇 到 的 另 一 个 问题 是 训 览 硕 太 懒惰 ,它们 并 不 辟 欢 下 载 东 西 。 这 
可 能 对 它们 来 说 太 乏 味 了 。 所 以 为 了 重复 利用 ,它们 会 将 图 片 以 及 其 他 资源 绥 存 起 来 , 这 是 很 肖 
见 的 。 对 于 用 户 来 说 这 很 棒 ， 它 提升 了 浏 览 带 的 体验 效果 。 但 对 于 Web 开 发 者 来 说 ， 这 很 痛苦。 
你 改变 了 一 张 图 片 , 但 那些 近期 下 载 过 它 的 用 户 却 不 会 看 到 。 很 可 惜 ， 因 为 新 的 图 片 比 旧 图 清晰 
RE. 为 了 解决 这 方面 的 问题 ，Compass 在 每 个 资源 末端 增加 了 修改 时 间 , 并 将 其 作为 查询 参数 。 
这 样 你 的 Web 服 务 右 就 会 正常 工作 了 ， 当 查询 参数 改变 时 ， 图 片 会 被 浏览 带 重 新 请 求 。 
举 个 例子 : 











tlogo ( background-image: image-url('logo.png'); } 
会 被 编 详 成 为 : 
logo ( background-image: url('/images/logo.png?1298578273'); } 





如 果 你 觉得 将 时 间 戳 作为 缓存 清理 的 参数 并 不 是 一 个 好 方案 , 那么 你 也 可 以 通过 配置 把 它 改 
成 别 的 。 比 如 ,发 布 计数 或 者 文件 在 源码 控制 系统 中 的 版 本 号 。 完 成 这 些 工 作 需 要 你 写 一 点 Ruby 
代码 。 举 个 例子 ， 在 你 的 Compass 配 置 文件 里 写 人 这 些 内 容 : 

# Increment the deploy version before every 


# release to force cache busting. 
asset cache buster do |http path, real path| 

















" v= 1 " 
end 
会 使 Compass 为 你 的 logo 图 片 生成 下 面 这 段 代 码 : 
#logo { background-image: url('/images/logo.png?v-1'); ) 











使 用 一 个 查询 参数 作为 缓存 清理 的 策略 可 能 会 干扰 一 些 缓存 资源 的 代理 功能 。( 这 样 的 查询 
字符 串 会 让 其 误 以 为 该 资源 是 动态 生成 的 。) 如 果 这 对 你 来 说 是 一 个 问题 ， 你 也 可 以 通过 一 行 
Compass 配 置 蔡 用 它 : 


asset cache buster: none 
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但 是 , 如 果 你 想 要 最 大 可 能 缓存 你 的 资源 并 且 又 可 以 清理 , 那么 最 好 的 办 法 就 是 重 写 资 源 的 
路 人 径 。 通 过 一 些 相 关 的 Web 服 务 右 配置 ， 你 可 以 生成 类 似 这 样 的 URL: 

#logo ( background-image: url('/images/10go-1307943914.png'); ) 

你 需要 配置 你 的 Web 服 务 器 ， 这样 它 会 知道 如 何 把 时 间 惟 路 径 对 应 到 真实 路 径 。 具 体 做 法 取 
决 于 你 的 Web 服 务 硕 ， 但 是 Compass 配 置 看 上 去 像 下 面 这 样 ， 如 代码 请 单 7-1 所 示 。 


代码 清单 7-1 定义 一 个 基于 路 径 的 资源 绥 存 清理 


asset cache buster do |path, real path| 始终 确认 文件 











if File.exists?(real path) 是 否 存在 Pathname 比 字符 
pathname = Pathname.new(path) 串 更 易于 操作 
modified time = File.mtime(real path) < 一 上 次 更 改 时 间 
new path = "€$s/$s-9Ss$s" € [ 
pathname.dirname, 根据 四 个 字符 串 
pathname.basename(pathname.extname), 构造 新 的 路 径 
modified time.strftime("£s"), 
pathname.extname 
] 
(:path => new path) 基于 路 径 的 资源 
d i ` 
id 的 特殊 返回 格式 


end 

如 你 所 见 ， 任 何 复杂 的 逻辑 都 可 以 在 Compass 配 置 文件 中 使 用 ， 因 为 这 是 一 段 Ruby 脚 本 。 比 
如 有 些 用 户 为 每 个 资源 集成 了 内 容 分 发 网 络 (CDN ) 或 生成 MDS 指 纹 。 但 是 更 复杂 的 逻辑 并 没 
有 涵盖 在 本 书 中 ， 所 以 如 果 你 想 为 创建 自 定义 代码 寻求 帮助 ， 请 关注 Compass 的 邮件 列表 
( http://groups.google.com/group/compass-users ) 或 你 附近 的 Ruby 专 家 。 

不 过 在 顾虑 CDN 这 人 么 长 远 的 问题 之 前 , 你 需要 先 做 出 原型 。CSS 最 佳 实践 认为 你 应 该 在 写 第 
一 个 选择 需 之 前 设置 好 一 个 Web 服 务 硕 。 让 我 们 看 看 为 什么 使 用 Sass 和 Compass 时 就 没有 这 个 
ME 

















7.2 用 Sass 和 Compass 做 原型 


不 论 你 是 基于 一 个 新 概念 还 是 用 一 些 新 鲜 的 模型 或 框架 开始 新 项 目 ， 在 项 目的 生命 周期 中 ， 
Sass 和 Compass 真 正大 放 有 异彩 的 时 间 点 都 是 项 目的 最 开始 。 有 人 会 认为 Sass 和 Compass 是 针对 大 型 
站 点 和 海量 CSS 的 ， 但 再 大 的 网 站 也 是 从 小 网 站 发 展 起 来 的 。 

另外 ,在 项 目的 最 开始 阶段 ， 所 有 的 东西 都 具有 不 确定 性 ， 这 时 Sass 和 Compass 优 秀 的 管理 
能 力 就 体现 出 来 了 。 CSS3 模 块 和 网 格 系统 让 设计 工作 在 浏览 锅 中 比 在 Photoshop 中 更 容易 。 用 Sass 
的 颜色 子 数 体验 网 站 的 配色 方案 ， 轻 松 得 就 像 玩 一 样 。 

当然 , 创建 原型 也 需要 撰写 HTML, 但 是 Sass 和 Compass 并 没有 涉及 HTML 的 相关 业务 ， 所 以 
我 们 兹 励 你 学 习 一 球 能 够 快速 搭建 原型 的 框架 ， 比 如 Serve ( http://get-serve.com ) 或 Middleman 
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( http://middlemanapp.com )， 它 们 包含 了 对 Sass: 和 Compass 的 外 围 支 持 。 

为 了 在 开发 阶段 用 相对 于 根 上 日 录 的 URL 撰 写 CSS 文 件 ， 开 启 一 个 新 项 目 通 常 意味 着 要 设置 
Web 服 务 右 、 编辑 配置 文件 并 修改 DNS 的 host 文 件 。 我 们 来 探讨 一 下 Compass 如 何 让 你 的 开发 环境 
A f SH fr] EP. s 








7.2.1 简化 你 的 开发 环境 


对 于 你 的 新 站 点 或 新 应 用 来 次 ， 相 对 于 样式 表 的 URL 是 一 个 不 错 的 起 点 。 它 们 可 以 脱离 Web 
服务 天 工作 , 所 以 你 在 创建 原型 时 可 以 使 用 人 简单 的 旧 的 HTML， 只 要 你 的 样式 表 及 其 资源 来 日 相 
同 的 域名 ， 它 们 就 可 以 在 任何 服务 带 环 境 下 正 稼 工作 。 对 很 多 用 户 来 说 ， 这 就 是 他 们 目 始 至 终 的 

当然 ， 这 种 相对 URL 也 面临 一 个 挑战 : 对 CSS 开 发 者 来 说 ,你 的 样式 表 变 得 很 难 分 辨 。 考 虑 
图 7-2 所 示 的 项 目 结构 。 




















Y 53 MyProject 
Y L3 stylesheets 
" B3 sections 
Z| header.css 


2i, main.css 
' B3 images 
加 logo.png 


图 7-2 一 个 人 简单 的 项 目 


当 使 用 相对 URL 时 ， 如 果 你 想 从 main .css 移 动 一 些 样式 到 header .css， 那 么 你 不 得 不 把 

#logo { background-image: url(../images/logo.png); } 
改 成 

#logo ( background-image: url(../../images/logo.png); } 

出 于 这 个 原因 ， 从 创建 原型 时 就 始终 使 用 简单 的 Web 服 务 器 和 相对 于 域名 的 路 径 的 做 法 一 直 
被 认为 是 最 佳 实践 。 甚 至 当 你 已 经 在 开发 环境 有 了 现成 的 Web 服 务 硕 时， 开局 一 个 新 的 站 点 也 并 
非 总 是 那么 容易 。 在 迷宫 一 样 的 配置 文件 、 本 地 host 名 和 服务 需 端 口 之 间 穿 梭 ， 这 对 于 很 多 前 端 
开发 者 和 设计 师 来 说 比 使 用 命令 行 还 起 怖 。 

但 因为 Compass， 你 再 一 次 被 解放 了 ， 你 可 以 通过 局 用 相对 资源 来 使 用 本 地 文件 。 为 了 使 用 
相对 资源 ， 只 需要 在 Compass 配 置 中 添加 下 面 这 行 代码 . 

relative assets = true 

当 它 启用 时 ,不 管 使 用 image-url ($path) .font-url ($path) 还 是 stylesheet-url ($path), 
Compass 都 将 生成 相对 路 径 。 值得 注意 的 是 , 生成 的 路 径 是 相对 于 编译 好 的 样式 表 的 ( 而 不 是 Sass 
样式 表 )。 意 思 是 说 ， 如 果 你 在 多 个 不 同 的 CSS 文 件 中 有 共享 的 部 分 ， 则 图 片 引用 的 相对 路 径 在 
所 有 的 情形 下 都 会 准确 无 误 。 举 个 例 和 于， 考虑 一 下 图 7-3 中 展示 的 项 目 结构 。 
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| v 23 MyProject 
" g sass 
Y E shared 
_partial.scss 
" E sections 
header.scss 
main.scss 
v g Css 
" E sections 
Z| header.css 
2i, main.css 
" 53 images 
I logo.png 





图 7-3 ”一 个 有 共享 部 分 的 项 目 





如 果 partial. scss 同 时 被 导入 了 main.scss 和 header .scss Hi partial. scs.: 
#logo { background-image: image-url ("logo.png"); } 
则 生成 的 main. css 会 包含 : 
#logo ( background-image: url(../images/logo.png?1298578273); ) 
上 且 生成 的 headqer .css 会 包含 : 
tlogo ( background-image: url(../../images/logo.png?1298578273); ] 
现在 你 可 以 从 样式 表 中 提炼 出 核心 的 内 容 。 你 的 相对 URL 将 会 始终 正常 工作 。 有 了 Compass， 
你 可 以 快速 建立 起 开发 环境 。 如 有 果 你 的 下 一 步 打 算是 打开 Photoshop ， 那 么 请 停 下 来 看 看 下 面 这 
TARE, 








7.2.2 ”直接 在 浏览 器 里 设计 


如 果 你 是 一 个 目 己 撰写 样式 表 的 设计 师 , 过 去 你 可 能 先 用 Adobe 的 Photoshop 或 Fireworks 为 网 
站 建 模 ， 然 后 当 你 对 设计 大 体 满 意 时 才 建 立 样式 表 。 在 CSS3 和 渐进 增强 之 前 ， 需 要 创建 图 片 切 
片 ， 于 是 几乎 必须 遵循 这 一 工作 流程 。 但 是 有 了 CSS3 、Sass 和 Compass 后 ， 在 浏览 仑 中 直接 设计 
网 站 变 得 非常 高 效 。 

从 渐变 色 到 阴影 、 圆 角 元 兹 到 美观 字体 ,如今 的 浏览 需 完 全 可 以 摆脱 图 片 处 理 惯 浓 的 设计 工 
作 了 。 在 很 多 情况 下 ，Compass 的 CSS3 模 块 让 撰写 代码 比 在 Photoshop 里 评估 效果 更 加 轻松 容易 。 
当 你 完成 设计 之 后 , 如 采 真 的 需要 文 持 老 版 浏览 本 ,也 可 以 通过 页 面 堆 图 把 需要 的 图 片 切 制 下 来 。 

效率 的 提升 不 仅仅 在 体现 在 只 需 一 次 操作 。 当 直接 在 浏览 夯 上 设计 时 , 你 能 更 清晰 明确 地 把 
设计 元 素 百 接 串 联 起 来 。 在 整个 创建 过 程 中 ,你 不 需要 思考 这 个 设计 需要 的 是 一 些 #4F9942。 你 
需要 思考 ， 我 需要 加 重 这 个 标题 的 颜色 等 此 类 问题 。 比 较 便 捷 的 做 法 是 撰写 aqjust-color 
(Sheader-color, $saturation: -15$, S$Slightness: -25%), 然后 把 参数 微调 几 次 直至 
满 音 为止。 但 是 当 你 从 模型 撰写 CSS 时 , 最 简单 的 事情 是 拿 出 取 色 带 然 后 复制 结果 到 你 的 样式 表 ， 
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这 会 丢掉 你 在 脑 中 设计 时 每 个 步 又 的 所 有 信息 并 且 修 改 起 来 也 会 更 困难 。 

浏览 硕 存 在 春 各 种 各 样 的 局 上限。 我 们 一 次 次 挑 浏 览 融 可 能 达到 的 极限 固然 很 好 ， 但 大 多 
数 情 况 下 你 只 是 为 了 完成 工作 。 在 浏览 带 中 设计 允许 你 在 这 些 局 限 下 工作 并 乐于 拥抱 它们 , 把 它 
们 视 为 设计 流程 的 一 部 分 。 比 如 对 于 浮动 元 系 而 言 , 我 们 很 难 想象 和 模拟 出 它 在 浏览 融和 窗口 大 小 
发 生变 化 时 的 反应 。 但 是 你 在 浏 览 历时 设计 时 ， 这 很 容易 就 看 得 出 来 ， 也 便于 测试 。 

Hasc. 你 会 发 现 这 个 建议 让 目 己 在 构建 初始 化 设计 的 过 程 中 多 花 了 一 些 时 间 , 但 是 除非 你 把 
整 件 事 抛 开 ， 否则 在 浏览 右 里 设计 和 创建 原型 就 是 最 有 可 能 缔造 局 质量 产品 ， 并 且 耗 时 更 短 ,将 
来 也 更 易于 更 改 的 方式 。 

现在 你 已 经 有 一 委 目 己 豆 欢 的 设计 了 ， 和 是 时 候 分 亨 给 全 世界 了 。 我 们 把 它 发 布 成 产品 吧 ! 


7.3 发 布 成 产品 


将 CSS 发 布 成 产品 实际 上 比 发 布 Sass 文 件 更 容易 。 毕 莞 CSS 是 一 个 简单 的 文件 ， 所 以 你 只 需 
要 把 文件 复制 到 你 的 Web 服 务 紫 然后 就 可 以 收工 了 。 有 了 Sass 和 Compass， 训 多 了 编译 的 步 又 ， 
产品 配置 也 要 做 好 。 虽 然 一 开始 这 可 能 有 点 麻烦 ,但 你 很 快 就 会 意识 到 Compass 会 让 你 为 CSS 思 
考 并 做 你 应 该 一 耳 在 做 的 事情 。 





























7.3.1 想不到 吧 ! 该 挪 贸 了 


你 被 客户 告知 ， 你 建立 的 原 计划 发 布 在 http://example.conyfancy-app/ 的 应 用 现在 要 重合 名 为 
http:/example.com/super-fancy-app/。 客 户 感 党 糟 透 卫 ， 他 们 认为 一 切 都 会 顺利 通过 ， 但 是 CEO 竞 
然 布 望 这 是 一 个 超级 应 用 。 最 终 他 们 被 这 个 问题 难 住 了 :“ 那 么 这 个 改动 需要 多 少时 间 ? ” 

毫 不 夸张 地 说 , 在 你 的 样式 表 里 有 上 百 个 URL。 如 果 你 得 手动 修改 并 测试 所 有 的 URL, 估计 
至 少 需 要 一 个 小 时 的 体力 劳动 加 测试 。 但 现在 你 是 Compass 用 户 了 ， 它 用 到 了 提供 的 所 有 URL 辅 
助 硕 ， 所 以 你 知 着 这 只 是 个 简单 的 配置 改动 。 你 只 需 在 配置 文件 里 修改 一 行 代码 : 








http path = "/fancy-app" 
将 其 改 成 下 面 的 样子 ， 然 后 重新 编译 : 
http path = "/super-fancy-app" 


不 过 你 现在 有 个 小 困扰 。 你 是 否 告诉 他 们 真实 的 时 间 售 计 结 来? 我们 倾 问 于 告诉 他 们 这 仅仅 
是 个 小 意思 , 不 会 产生 额外 工作 量 , 因为 我 们 豆 欢 获得 肯定 并 阐明 我 们 在 使 用 样式 表 编 详 剖 时 就 
已 经 考虑 到 了 。 让 这 些 机 各 蔡 你 完成 所 有 的 工作 旦 不 是 很 爽 吗 ? 在 下 一 全 ， 你 将 会 看 到 Compass 
在 部 署 时 如 何 针 对 生产 环境 让 工作 变 得 更 简单 。 











7.3.2 为 生产 环境 编译 


在 Compass 中 ， 你 可 以 通过 两 种 不 同 模式 来 管理 自己 的 样式 表 ， 即 开发 时 和 服务 于 产品 时 。 
通常 情况 下 ，Compass 使 用 的 是 aevelopment 环 境 。 如 果 想 使 用 prodquction 环 境 ， 你 需要 像 按 
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如 下 方式 编译 你 的 样式 表 : 

compass compile --force -e production 

Compass 默 认 使 用 产品 样式 表 。 你 的 输出 将 会 被 压缩 ， 且 大 部 分 的 注释 会 被 去 掉 。 我 们 也 可 
以 为 当前 模式 设置 一 个 特殊 的 配置 。 比 如 ， 如 有 果 你 想 在 生产 环境 下 以 紧凑 型 输出 ， 你 可 以 在 
Compass 配 置 中 添加 这 个 条 件 设置 . 


1f environment 





= :production 
: compact 


output_style = 
end 


使 用 这 个 预 设 , 就 有 可 能 利用 环境 的 切换 来 设置 不 同 的 资源 配置 ， 当然 , 这 取决 于 你 是 在 开 
发 机 各 还 是 生产 环境 。 


7.3.3 生成 相对 于 域名 的 资源 


默认 情况 下 ，Compass 生 成 相对 于 域名 的 URL 以 假定 你 在 通过 一 台 Web 服 务 器 浏览 网 页 。 现 
在 你 将 要 发 布 自己 的 网 站 了 ， 你 需要 考虑 一 些 Compass 的 配置 设置 以 正确 生成 URL。 第 一 个 要 考 
虑 的 设置 是 项 目的 http_path 一 一 这 个 默认 值 是 /， 但 是 如 果 你 的 站 点 承载 在 一 个 子 目录 中 ， 你 
就 需要 改变 这 个 Compass 配 置 : 


http path = '/my-app' 


如 果 你 已 经 启用 了 相对 资源 ， 你 应 该 禁用 它们 ， 因 为 你 不 想 生 成 相对 于 CSS 文 件 的 URL， 而 


relative_assets 设 置 会 优先 : 





relative assets = false 
再 次 编译 之 后 ，logo 的 URL 变 成 了 : 
#logo { 


background: url('/my-app/images/logo.png?1240702589'); 
} 


设想 一 下 ， 在 部 莹 时 你 的 图 片 被 复制 到 了 一 个 相对 于 站 点 根 目录 的 叫做 imgs 的 文件 夹 。 这 
种 情况 下 ， 你 需要 为 你 的 项 目 设 置 http_images_dir: 





http path = '/my-app' 
relative assets - false 
images dir = 'images' #locally it's the images folder 
http images dir = 'imgs' don the webserver it's different 
再 次 编译 之 后 ，logo 的 URL 变 成 了 : 
#logo { 


background: url('/my-app/imgs/logo.png?1240702589'); 
} 


但 如 采 你 的 网 站 很 奇 范 ， 它 决定 把 它 的 图 片 放 到 一 个 完全 不 同 于 HTML 的 地 方 , 那么 你 就 要 
转 而 设置 ht tp images path: 
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http path = '/my-app' 

relative assets - false 

images dir - 'images' < 一 本 地 图 片 的 位 置 
http images path = '/somewhere-else/imgs!' 

再 次 编译 之 后 ，logo 的 URL 变 成 了 : 

tlogo { 


background: url('/somewhere-else/imgs/logo.png?1240702589'); 
} 


Compass — JE IHK HS n] RERE. CC DB APARECE, He IR, 
你 能 很 快 和 它们 成 为 好 朋友 。 在 你 的 网 站 上 线 之 前 ， 还 有 一 件 重 要 的 事情 ， 就 是 给 ij 点 上 点 儿 ， 
给 t 志 上 横 线 "， 注 意 像 版 权 提示 之 类 的 可 能 漏 掉 的 小 事情 。 


7.3.4 添加 版 权 提 示 


有 些 站 点 选择 为 它们 的 样式 表 注 明 版 权 。 如 果 你 也 要 这 样 做 ， 你 可 能 会 因为 Sass 在 压缩 样式 
表 时 去 掉 了 CSS 的 注释 而 郁闷 。 为 了 解决 这 个 问题 ，Sass 提 供 了 大 声 的 注释 。 大 声 的 注释 以 一 个 
感叹 号 标记 开始 ， 紧 跟 在 一 段 CSS 注 释 的 星 号 后 面 : 

p= 


Copyright © 2012, Example Inc. All Rights Reserved. 
*/ 
这 里 值得 注意 的 是 ,大 声 的 注释 会 识别 Sass 脚 本 ， 所 以 它们 可 以 将 你 的 版 权 提 示 设 置 为 变量 
并 在 站 点 之 中 重用 : 
$copyright-year: unquote("2012"); 
$company-name: unquote("Example, Inc."); 
E 
Copyright © #{$copyright-year}, #{S$Scompany-name} 


All Rights Reserved. 
*/ 


这 让 律师 倍 感 开心 不 是 吗 ? 现在 是 时 候 把 你 的 站 点 放 到 生产 环境 中 了 ! 
7.3.5 ”发布 CSS 很 简单 


如 果 你 的 CSS 发 布 系统 是 复制 样式 表 到 你 的 Web 服 务 器 ,那么 这 件 事 对 你 来 说 不 会 改变 太 多 。 
当 你 为 生产 环境 重新 编 详 你 的 样式 表 之 后 , 你 还 是 得 到 了 普通 的 原来 的 CSS 文 件 。 从 这 一 点 出 发 ， 
你 的 流程 和 之 前 没有 区 别 。 关 键 在 于 你 从 服务 于 用 户 的 地 方 得 到 了 你 的 样式 表 。 在 图 7-4 中 ， 你 
可 以 看 到 一 个 简单 的 发 布 流程 。 















































(D 英语 习 语 ， 因 为 英文 的 书写 习惯 是 字母 i 上 的 点 儿 和 字母 t 上 的 横 线 一 开始 先 不 写 ， 最 后 再 统一 补 齐 ， 这 里 暗 指 善 
"AREE, — Hel 
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本 地 文件 开发 人 员 
图 7-4 ”Sass 样 式 表 如 何 提供 服务 


如 果 你 的 网 站 很 人 镜 单 ， 而 你 是 唯一 的 开发 人 员 ， 这 个 流程 看 上 去 很 不 错 。 但 是 如 来 你 在 一 个 
队 中 工作 并 且 使 用 了 源码 控制 、 构 建 及 (或 ) 发 布 脚本 ,那么 你 需要 考虑 的 束 更 多 了 。 


7.3.6” 跟 源码 控制 、 发 布 流程 配合 在 一 起 


源码 控制 最 佳 实践 表明 非 手 工 编辑 的 生成 文件 不 应 该 出 现在 源码 控制 中 。 相 反 , 你 应 该 忽略 
生成 的 CSS 文 件 , 在 发 布 时 或 发 布 之 前 用 一 个 可 重复 的 流程 来 准备 样式 表 ， 将 其 作为 构建 工作 中 
的 一 步 。 

但 是 很 多 网 站 并 没有 也 不 打算 增加 这 样 的 步 又 ， 因 为 他 们 已 经 有 S$ass 了 。 在 这 些 情况 下 ,， 许 
多 用 户 把 他 们 编译 的 CSS 通 入 源码 控制 系统 。 如 果 你 这 样 做 了 ,那么 合并 冲突 时 有 发 生 。 这 时 最 
好 的 建议 就 是 删 掉 你 生成 的 样式 表 ， 在 源码 控制 系统 里 解决 合并 冲突 ( 如 有 果 存 在 的 话 )， 重 新 
编译 。 

如 采 你 的 应 用 有 了 这 个 构建 步 又, 它 可 能 足以 徘 一 条 命令 编译 整个 项 目 , 但 是 有 些 构建 系统 
可 能 希望 通过 make 这 样 的 工具 一 次 只 编 详 一 个 文件 。 在 这 种 情况 下 ， 你 可 以 传递 单个 文件 给 
Compass 编 译 需 或 Sass 命 令 行 编译 顺 ， 它 们 都 有 此 类 工具 的 传统 界面 。 

这 人 句 命令 编译 了 一 个 单独 的 文件 : 


compass compile my sass dir/application.scss 
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要 用 Sass 命 令 行 编 译 一 个 单独 的 文件 ， 你 需要 传递 --compass 参 数 : 

sass --compass my sass dir/application.scss my css dir/application.css 

如 果 你 不 理解 自己 团队 的 构建 流程 , 一 定 要 不 耻 下 问 。 相 比 于 生成 文件 存在 的 合并 冲突 风险 ， 
大 多 数 工 程 师 都 喜欢 处 理 一 芳 永 逸 的 设置 。 具 有 复杂 构建 和 发 布 脚本 的 团队 铺 党 有 一 个 预 发 环 
境 , 在 那里 他 们 可 以 连续 部 署 并 进行 发 布 前 的 最 后 测试 。 下 面 继续 介绍 两 个 环境 以 上 的 有 效 管 理 
TR 


7.3.7 ”和 预 发 服务 器 一 起 工作 


有 些 站 点 有 一 个 预 发 环境 ,那里 的 代码 都 需要 进行 最 终 测 试 并 将 要 发 布 上 线 。 有 些 网 站 其 至 
有 三 层 预 发 环境 〈( 边 绿 、 集 成 、 预 发 )， 用 来 测试 并 集成 不 同 成 熟 度 的 功能 。 
其 实 有 的 时 候 把 生产 环境 的 样式 表 提 前 放 和 人 预 发 环境 就 已 经 足够 了 。 但 是 预 发 环境 可 能 会 稍 
































有 不 同一 一 通常 是 主机 名 不 一 样 ,或 者 可 能 你 没有 使 用 生产 环境 的 CDN。 在 这 些 情况 下 , 你 需要 
调整 相应 的 配置 。 

针对 这 种 情形 ， 我 们 有 两 个 建议 。 一 是 在 编译 时 设置 环境 变量 : 

STAGING-true compass compile --force -e production 





然后 在 配置 文件 里 ， 你 可 以 使 用 Ruby 检 测 这 个 环境 变量 并 改变 相应 的 设置 : 


if ENV['STAGING'] 











relative urls = true 
output style = :Compact 
elsif environment == :production 
relative urls = false 
output style = :Compact 
else tdevelopment 
relative urls = true 
output style - :expanded 
end 
如 果 你 针对 每 个 环境 的 配置 是 明显 不 同 的 ， 那 么 你 也 可 以 创建 不 同 的 配置 文件 : 
compass compile --forec -c staging config.rb -e production 





为 了 保持 一 致 性 并 避 倪 重复 代码 ，staging_config.rb 文 件 应 该 包含 一 般 环 境 的 配置 文 
然后 在 这 个 基础 上 进行 改动 : 


eval(File.read("tí(File.dirname( _FILE )}/config.rb")) 
relative urls = true 


件 


El 


Output style = vcompact 

发 布 到 预 发 服务 天 对 复杂 站 点 来 说 是 一 个 很 棒 的 实践 , 虽然 没有 原生 文 持 , 你 还 是 可 以 看 到 
作者 选择 一 个 Ruby 文 件 进行 配置 的 原因 : 它 人 允许 小 概 率 的 特殊 情况 也 能 被 轻松 文 持 。 

现在 藉 喜 你 已 经 把 网 站 放 到 预 发 环境 了 。 下 一 站 就 是 : 生产 环境 ! 我 保证 这 绝对 是 一 个 了 不 
起 的 成 功 。 
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7.4 ”小 结 





在 这 一 草 ， 我 们 看 到 从 早期 的 快速 原型 到 准备 好 生产 环境 的 发 布 ，Compass 在 整个 生命 周期 
当中 对 项 目的 文 持 。 我 们 还 看 到 Compass 资 源 辅助 硕 把 资源 的 样式 表 细 隐藏 起 来 ， 在 开发 阶段 
给 你 一 个 人 简单 的 配置 驱动 的 本 地 资源 服务 方式 , 在 生产 环境 为 网 站 加 速 文 持 多 个 资源 主机 。 你 还 
学 到 了 一 些 在 浏览 大 中 工作 的 Compass 技 巧 ， 以 及 应 该 如 何 让 源码 控制 系统 对 待 你 的 样式 表 。 在 
不 知道 也 无 需 关 注资 源 服务 具体 知识 的 情况 下 , 你 通过 创建 智能 且 高 度 抽象 的 样式 表 为 优化 网 站 
性 能 提供 了 坚实 的 基础 。 在 下 一 章 ， 我 们 会 看 一 看 那些 互联 网 上 最 繁忙 的 网 站 们 的 琳 略 ， 以 及 
Compass 如 何 支 持 它们 并 帮助 扩大 。 
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本 章 内 容 

O 样式 表 拼 接 

O 样式 表 和 资源 压缩 

口 减少 和 并 行 图 片 请 求 的 策略 
口 选择 器 性 能 和 优化 策略 


通过 上 一 草 我 们 了 解 到 ， 由 于 严重 依赖 于 外 部 资源 ， 样 式 表 的 维护 相当 烦琐 。 更 粳 糕 的 是 ， 
样式 表 还 是 无 数 客 户 端 性 能 问题 以 及 “混合 内 容 ” 可 怕 和 警告 的 来 源 。 

但 是 通过 吕 循 客户 并 性 能 的 最 佳 实践 , 你 也 许可 以 将 页 面 载 和 人 时间 缩短 几 秒 。 节 省 的 这 几 秘 
钟 将 对 你 的 搜索 引 警 排名、 用 户 黏 度 以 及 转换 率 目 标 产生 重大 影响 。 关 于 这 个 主题 的 网 书 数 不 胜 
数 ， 本 和 草 只 介绍 Sass 和 Compass 中 能 让 你 快速 实现 Web 性 能 优化 的 独 有 特性 。 

到 目前 为 止 , Web 性 能 的 一 个 最 佳 资 源 是 谷歌 的 PageSpeed 文 档 : http://developers.google.com/ 
speed/pagespeed/。 对 于 每 个 关心 客户 闹 性 能 的 人 来 说 ,该 文档 都 是 必 读 的 资料 。 尺 管 该 文档 中 提 
及 的 一 些 策 略 实施 起 来 比较 简单 , 但 是 很 多 末 上 略 还 是 颇具 挑战 性 。 在 CSS 中 难以 “正确 做 事 ” 时 ， 
你 很 有 可 能 作出 妥协 并 走 回 错误 的 方 回 ， 而 使 用 Sass 和 Compass,“ 正 确 做 事 ” 十 分 容易 。 因 此 ， 
我 们 和 希望 你 能 够 抽出 少量 时 间 来 优化 你 的 样式 表 ， 尽 你 所 能 将 Web 变 得 又 快 又 好 。 

优化 样 陈 表 基 本 上 可 以 归 绪 为 减少 传输 的 字 节 数 , 确保 最 大 限度 地 将 传输 数据 放 和 人 缓存 ， 以 
及 减少 浏览 希 和 服务 希 之 间 往 返 的 次 数 。 没 有 什么 银 弹 能 保证 你 的 网 站 变 得 速度 怀 人 , 但 是 因为 
Sass 和 Compass 提 供 的 工具 和 平台 可 以 根据 与 具体 需求 相关 的 使 用 模式 和 度量 来 调整 样式 表 ， 所 
以 它们 已 经 被 许多 互联 网 上 的 大 型 站 点 采用 。 

但 是 ， 如 采 你 一 开始 并 不 知道 你 的 网 站 究竟 有 多 慢 ， 又 怎么 能 够 让 你 的 网 站 变 快 呢 ? 过 去 ， 
测量 客户 问 性 能 是 一 件 琐 碎 无 趣 的 事 , 但 近 几 年 , 测量 载 人 时 间 和 识别 页 面 结构 中 的 关键 路 税 已 
经 容易 得 多 了 。 
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十 多 年 前 只 能 够 粗略 地 完成 这 样 的 测量 ,而且 相 关 的 补救 措施 也 不 总 是 很 明显 。 如 今 有 很 多 优秀 
的 开发 者 工具 能 够 帮助 你 诊断 这 些 指标 。 如 有 果 你 过 去 从 来 没有 使 用 过 下 面 列 出 的 这 些 工 具 , 那么 
你 已 经 错过 了 页 面 载 人 的 有 关 信 息 ， 这 可 是 一 笔 财 语 。 

DYSlow: http://developer.yahoo.com/yslow/.; 

Q Google PageSpeed: http://developers.google.comySpeed/pagespeed/。 

CQ WebPagetest: http://www.webpagetest.org/ ( 参见 图 8-1 )。 


Waterfall View 
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http://w caring .con 

ww.caring.com - / 

Ww.CAning.com ~ bach.css 
WWw.Ccaning.com ~ system. js 
ww.caring.com ~ bach.js 
www.caring.com - bsch .jz 
www.Caring.com - bach. b.css 
use.tupekit.com ~ sda6nli.Js 
Ww.google.com ~ jsapi 

Ww.caring.com ~ status.js 

: use.tupekit.cow - sda6nli-c.cts 

: use. tupekIt.co...-C-10356340-6037 eot 
: use. tupek1t.co...70-1035340-6043 , eot. 
: ww.caring.cow ~ spacer.gifF 

: 3.c-img.con - spscer.gif 

: ww.Canring.cow - howe hero.js 

: dilGusmwpordeg...ont.net ~ logo2.png 
: diiGumwpordagg...net = button bg.png 
: 0.c-img.con ~ matthews-weatar .jpg 

: 1.c-img.con - avsadian-evatar .jpg 

i www.CAning.COoM...Cal-seanch-£ind.gi£ 
b.scorecardresearch com = beacon,js 
www.google-analutics.com = ga.js 

: edge.quantserve.com - quant .js 

24: apis.google.com - plusone.js 
diiGumwpordagg...- hero-20110631 ,jpg 
A 2d 
$.C-iRg.COM ~ prev.png 

WW .caring .con - mega ns 
diiGumwpordag...et - hero-slide.png 
diiGumwpordagg...t.net - usa-nap.gif 
$.C-Ing.com = inrer prev.png 
$.c-ing.com ~ ... slideshow ple.png 
$.c-img.conm - losding.gif 
4.C-ing.conm - blork .Gif 
diiGumwpordagg....net - eyeglass. gif 
diiGumupordagg... = shadow right .png 
$.C-img.com ~ inner next .png 
diiGumwpordsqg...nt.net - nav-bg.pog 
: pixel.quantser,...0;a82p-C&wX7€P78TF3E 
b. — COM - b 

41: ww.google-analutics.com = . utm.gif 
42: b.scorecardresearch.com ~ b2 

43: ss1.gstatic.c...client plusone.js 
44; www.Canring.Com ~ favicon.ico 

45: diiGumwpordagg...t - shadow left.png 
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图 8-1 所 展示 的 是 一 张 来 目 webpagetes.org 的 瀑布 图 。 它 是 一 项 能 够 百 接 诊断 性 能 问题 的 免费 
服务 。 虽 然 网 站 并 不 漂亮 , 但 是 它 提供 的 信息 却 是 尺 人 的 。 它 能 够 让 你 知道 究竟 是 哪些 请 求 阻 断 
了 其 他 请 求 , 哪些 请 求 在 并 行 运行 。 它 能 够 让 你 对 比 缓存 与 不 缓存 之 间 的 体验 差别 ， 还 能 够 分 解 
DNS 所 花 的 时 间 ， 接 收 到 第 一 个 字 节 的 时 间 〈 服务 融 到 客户 并 一 个 来 回 所 需 的 时 间 )， 以 及 传输 
时 间 。 

既然 你 已 经 了 解 到 了 如 何 测量 页 面 性 能 ， 下 面 就 可 以 开始 优化 了 。 优化 的 第 一 步 是 停止 导致 
页 面 缓慢 的 不 必要 工作 ， 最 不 必要 的 就 是 基于 CSS 的 导入 。 























8.2 ”回避 带 有 服务 器 端 @import 的 HTTP 请 来 


正如 你 在 第 3 革 中 看 到 的 ，@import 指 令 是 一 个 非 第 有 用 的 工具 ， 它 能 够 将 大 型 的 样式 表 组 
织 为 较 小 的 部 分 , 以 便 轻 松 地 查找 样式 。 在 CSS 的 一 个 样式 表 中 导入 许多 其 他 的 样式 表 并 不 人 鲜 见 : 


@import url 





blog.css"); 


ü3mport url("'forum.css"); 


ü1mport url("article.css"); 


(" 
(" 
(" 
(" 


Qimport url("header.css"); 


@import url("footer.css"); 

这 样 的 写法 降低 了 第 一 个 页 面 的 速度 ， 因 为 它 需 要 数 个 HTTP 请 求 以 下 载 所 需要 的 多 个 样 
AK. 

18-2 5 f EUREN. Y | Vii An] AE EE TK EA Ae — T FERRE 6, 被 导入 的 3 张 样式 
表 同 时 又 各 日 导入 了 为 外 10 张 样式 表 。 对 于 一 个 项 目 来 说 , 这 是 完全 合理 的 结构 , 但 是 正如 你 所 
看 到 的 ， 只 有 在 CSS 文 件 下 载 完 成 后 才能 开始 每 一 个 层级 的 导入 。 更 粳 糕 的 是 ， 浏览 可 每 次 从 单 
个 服务 郁 上 下 载 的 文件 数目 是 有 限制 的 。 下 接 的 影响 就 是 ，CSS 中 的 eimport 为 第 一 个 页 面 的 载 
入 增加 了 不 必要 的 时 间 ， 而 这 正 是 我 们 最 关心 的 。 因 此 ，CSS 的 最 佳 实践 指出 ， 要 将 你 的 样式 表 
连接 成 少数 几 个 样式 表 。 这 就 是 Sass 提 供 服 务 胡 请 导 入 的 原因 

QGimport "blog", "forum", "article", "header", "footer"; 

这 将 提高 第 一 个 页 面 的 载 人 速度 ， 因 为 所 有 的 样式 表 只 需要 一 次 请 求 就 能 下 载 完成 。 

但 是 你 是 否 注意 到 了 其 中 的 缺陷 ? 不 同 的 网 站 和 Web 应 用 有 着 不 同 的 访问 者 醒 式 。 如 后 访问 
者 经 常 返回 浏览 你 的 网 站 , 并 且 样 式 表 中 的 某 些 部 分 几乎 不 变 , 那么 分 开 下 载 一 些 样式 表 是 有 意 
义 的 。 这 能 让 他 们 的 浏览 此 在 一 些 样式 表 发 生变 化 时 更 好 地 利用 缓存 ; 否则 , 样式 表 中 的 一 个 小 
变化 就 需要 再 次 下 载 整个 网 站 的 样式 表 。 同 样 ， 如 果 你 的 访问 者 只 浏览 网 站 中 的 个 别 页 面 ， 那么 
让 浏览 奋 下 载 每 一 个 模板 的 样式 就 没有 什么 意义 了 。 

许多 网 站 采取 的 全 上 略 是 将 CSS 文 件 组 织 为 三 个 层级 ( 参见 图 8-3 )。 

O 核心 样式 表 : 几乎 每 个 页 面 都 需要 的 普通 样式 。 

口 部 分 样式 表 : 应 用 或 者 网 站 的 某 个 大 型 部 分 需要 的 普通 样式 。 

O 单 页 样式 表 : 只 有 菏 个 单独 页 面 知 要 的 样式 ,经 常用 于 销售 页 面 这 样 设计 复杂 而 独特 的 

页 面 。 
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waterfall .htnl 
ai .C33 
1.css 
2.c3S 
3.055 
1-1.cs$ 
1-2.cs$ 
1-3.css 
1-4.cs5 
1-5.css 
1-6.cs$ 
1-7.c93 
1-8.css 
1-9.css 
1-10.c*$ 
3-1.c$$ 
3-2.C33 
3-3.c55 
3-4.c55 
3-5.cs$ 
3-6.cs$ 
3"7 .C033 
3-8.c55 
3-9.cs5 
3-10.cs$ 
2-1.ct* 
2-2.C5$ 
2-3.css 
2-4.c$5 
2-5.c*$ 
2-6.css 
2-7.c25 
2-8.css 
2-9.cs5 
2-10.c33 





图 8-2” 基 于 CSS @import 的 性 能 瀑布 图 


这 样 ， 既 不 用 牺牲 网 页 组 织 结构 ， 也 减少 了 多 余 的 请 求 。 接 下 来 ， 就 可 以 看 看 怎么 减少 下 载 
资源 〈 如 样式 表 和 图 片 ) 的 时 间 。 


Co 
SSO'Xepul 
sso'}sod 
SSO'UuJOl 
SSO'Xepul 
SSo']sod 
SSO'UlJ0J 
SSo'Xepul 
SSo'jueuluJoo 
sso uiupe 
SSo'Xepul 
sso Buiuejsil 
sso'dnuBis 





| 
1 application.css 








图 8-3 ”常见 的 CSS 结 构 
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8.3 ”用 压缩 减少 传输 时 间 


有 个 简单 的 方法 能 让 你 的 网 站 变 得 更 快 : 缩小 在 互联 网 中 传送 内 容 的 大 小 。 这 再 明显 不 过 ， 
但 是 如 何 做 到 就 不 那么 显而易见 了 。 

如 果 你 还 没有 着 手 ， 现 在 是 时 候 开始 压缩 Sass 输 出 内 容 了 。 对 大 多 数 用 户 来 次 ， 这 是 一 件 非 
名 简单 的 事情 ， 要 做 的 仅仅 是 再 次 连同 -e production --force 参 数 运行 Compass 编 译 器 。 生 
产 环 境 默 认 设 置 为 使 用 compressed 输 出 模式 。 但 是 你 同样 可 以 通过 将 Compass 配 置 的 
output styl e 设 置 为 : compressed 或 者 在 Sass 命 令 行 工 具 中 使 用 -t compres sed 来 完成 s 

压缩 样式 表 中 的 文本 是 一 个 好 的 开始 。Sass 会 去 除 注 释 和 多 余 的 空格 ， 并 使 用 颜色 的 最 简 表 
示 法 。 但 这 只 是 个 开始 ，gzip 压 缩 将 会 帮助 你 把 样式 表 压 缩 得 更 小 。 




















8.3.1 gzip 压 缩 


大 多 数 现 代 浏 览 锅 会 连同 请 求 发 送 一 个 请 求 首 部 Accept-Encoding: gzip， 只 要 啊 应 中 含 
有 一 个 包含 Content-Encoding: gz ip 的 首部 ， 了 网 能 被 压缩 。 由 于 CSS 重 复 、 宛 长 的 天 性 ， 样 
式 表 可 以 被 压缩 到 原来 的 10%~15%， 确 实 减 少 了 很 多 ! 相 比 之 下 ，JavaScript 文 件 一 般 只 能 被 压 
缩 到 原 有 大 小 的 25% 左 右 。 

通常 , 优化 前 端 性 能 的 最 佳 方式 是 尽 可 能 缩小 资源 的 网 络 复写 。 对 于 所 有 关注 客户 闹 性 能 的 
网 站 来 说 ， 使 用 gzip 压 缩 文 本 资源 并 优化 网 络 图 片 都 是 必 行 之 事 。 

大 多 数 Web 服 务 硕 都 有 一 个 设置 选项 或 者 插件 来 开局 实时 压缩 。 在 大 多 数 情 况 下 ,压缩 所 花 
费 的 时 间 要 远 远 少 于 在 互联 网 中 传输 所 节省 的 时 间 。 

预 压 缩 样式 表 并 根据 请 求 首 部 提供 不 同 的 文件 也 是 一 种 可 行 办 法 。 设 置 方法 应 该 依据 服务 规 
来 具体 分 析 。 但 是 如 果 你 需要 进行 这 样 的 设置 ，Compass 提 供 了 一 种 简单 的 方式 来 自动 生成 压缩 
样式 表 。 你 可 以 在 Compass 中 注册 一 个 回调 盟 数 ， 每 当 保存 一 个 新 的 样式 表 ， 它 都 会 运行 。 将 下 
面 的 代码 添加 到 你 的 Compass 配 置 文件 中 即 可 : 


on stylesheet save do |filename| 









































# run the gzip tool on the file 
# generates a file of the same name 
# plus a .gz at the end. 
`gzip -f #{file}` 
end 


441) SOWAS E NA A gzipHkAi. SESE, 但 这 可 以 为 你 的 用 户 提 
供 便 利 ， 绝 对 是 值得 的 。 
可 惜 ,样式 表 仅 仅 是 你 需要 压缩 内 容 中 的 一 小 部 分 。 通 稍 来 说 ,， 图片 才 是 能 做 出 最 大 改善 的 
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8.3.2 EH Hf 


7k NA SassfliCompassZG2e ,. (HÆR pus W ZEKIRI EFK Rr Hát BJ dE 
内 容 。 

关于 图 片 ， 你 首先 需要 了 人 解 的 是 ， 大 多 数 图 片 格式 拥有 内 建 的 压缩 方式 。 基 本 的 法 则 就 是 ， 
针对 不 同 的 图 片 ， 你 应 该 使 用 能 够 达到 最 大 压缩 程度 的 不 同 图 片 格式 。 也 就 是 说 ,你 一 般 应 该 使 
用 下 面 几 种 格式 : 

a GIF 格式 用 于 颜色 数量 少 的 小 文件 ; 

O PG 格式 用 于 在 图 片 质 量 设置 为 最 低 值 时 不 会 引起 图 片 质 量 明 显 下 降 的 摄影 图 片 ; 

O PNG 格 式 用 于 其 他 图 片 。 

PNG 是 一 种 能 够 处 理 多 种 图 片 类 型 的 复杂 格式 。 确保 移 除 其 中 的 alpha 层 , 否则 会 得 到 透明 效 
有 果 。 我 们 强烈 推荐 你 安装 免费 工具 Pngcruch， 并 且 在 所 有 的 PNG 图 片上 运行 一 按 。 你 可 以 从 
http://pmt.sourceforge.net/pngcrush/ 下载 Pngcrush。 

现在 你 已 经 将 资源 压缩 得 尽 可 能 小 , 那么 就 可 以 将 注意 力 转移 到 如 何 载 人 这 些 资 源 上 了 。 例 
如 ， 你 有 没有 意识 到 浏览 硕 会 限制 从 一 个 Web 服 务 硕 连续 下 载 货 源 的 数量 ? 如 采 你 运行 着 一 个 负 
载 均 衡 的 网 站 ， 这 对 你 来 说 应 该 有 些 保守 了 了， 因为 你 肯定 可 以 处 理 更 多 的 同步 连接 。 你 只 需要 掌 
握 一 个 叫做 资源 托管 的 小 技巧 。 


8.4 用 资源 托管 提高 页 面 加 载 速度 


HTTP/1.1 标 准 中 指出 ，Web 浏 览 器 应 该 限制 每 次 页 面 请 求 中 单个 域 的 同步 下 载 数 量 ， 从 而 达 
到 最 佳 效 采 。 但 是 在 许多 服务 右上 运行 的 负载 均衡 网 站 可 以 很 好 地 处 理 这 种 突 发 流量 , 因此 你 需 
要 对 浏览 需要 一 点 小 把 戏 来 解决 这 一 问题 。 一 种 普 过 的 胰 略 是 注册 多 个 域 〈 或 者 子 域 )， 并 将 它 
们 解析 到 同一 个 地 方 。 随 后 ，Web 浏 览 需 将 同步 下 载 更 多 的 资源 ， 使 你 的 用 户 体验 到 更 快 的 页 面 
加 载 速度 。 

例如 ， 一 个 叫做 example.com 的 站 点 可 能 需要 设置 img-1.example.com、img-2.example.com、 
img-3.example.com 和 imsg-4.example.com。 每 一 个 DNS 名 实际 上 都 被 称 为 一 个 CNAME 记 录 ， 意 味 着 
它们 都 是 www.example.com 的 别名 。 

除了 具有 并 行 的 好 处 ， 设 置 资源 托管 来 使 用 一 个 无 cookie 域 也 很 重要 ， 即 一 个 不 会 和 站 点 分 
译 cookie 的 域 。 它 每 次 可 以 使 用 更 少 的 字 市 回 服 务 右 发 送 图 片 请 求 。 这 并 不 是 什么 了 不 起 的 事 ， 
但 是 如 采 你 正在 努力 设置 新 域 ,你 基本 上 可 以 免费 获得 这 个 小 而 重要 的 帮助 手段 。 关 于 无 cookie 
域 的 详细 信息 ， 你 可 以 查看 谷歌 的 PageSpeed 文 档 : http://developers.google.com/speed/docs/ 
best-practices/request/。 

然后 , 将 指 癌 图 厂 、 样 式 表 和 JavaScript 的 链接 均匀 分 发 至 有 效 的 资源 托 省 ,很 重要 的 一 点 是 ， 
总 是 通过 同一 个 资源 托管 来 获取 相同 的 资源 ,否则 该 资源 就 会 被 多 次 下 载 。 很 明显 ， 只 有 在 你 拥 
有 一 个 可 文 配 的 框架 去 处 理 这 些 繁重 的 工作 , 并 排除 人 为 引发 的 错误 时 ,， 上述 的 解决 办 法 才 是 可 
行 的 。 你 非常 重 运 ! Compass 使 资源 托管 变 得 非常 容易 ! 
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8.4.1 使 用 资源 托管 生成 URL 


在 默认 情况 下 ， 资 源 托管 在 Compass 项 目 中 是 关闭 的 ， 但 是 你 可 以 告诉 Compass 如 何在 资源 
托管 上 分 发 资源 ， 从 而 开局 资源 托管 。 例 如 ， 为 了 在 四 个 子 域 中 分 发 资源 ， 你 需要 在 Compass 配 
置 中 添加 以 下 Ruby 代 码 : 


asset host do |asset | 








Q 


host_number = (asset.hash % 4) + 1 
"http://img-#{host number} .example.com" 
end 


下面 进行 解释 。 正 如 你 在 前 一 章 中 学 到 的 ， 你 应 该 使 用 Compass 的 资源 URL 辅 助 带 来 编写 所 
有 的 资源 引用 。 如 有 果 你 已 经 遵循 了 这 条 最 佳 方 式 ， 其 实 就 已 经 对 资源 托管 有 了 一 些 不 错 的 实践 。 
这 里 ， 你 仍然 编写 下 面 的 CSS 代 码 : 

#logo { 


background-image: image-url("logo-small.png") 


) 

你 在 配置 中 定义 的 asset_host 男 数 接收 一 个 叫做 asset 的 参数 ， 它 将 被 完全 解析 为 指 回 资 
源 的 HTTP 绝对 路 径 。 根 据 你 的 其 他 配置 , 解析 后 的 路 径 格 式 应 该 类 似 /images/1o0go-small .png。 
asset_host 子 数 的 任务 是 返回 资源 生成 URL 的 协议 和 主机 地 址 。 

尽管 你 可 以 目 由 地 运用 任何 满足 需求 的 逻辑 , 但 是 前 面 的 例子 在 通常 情况 下 已 经 足够 了 。 首 
i, asset .hash 会 给 你 一 个 数字 来 唯一 地 表示 asset 字 符 串 。 其 次 ， 取 模 运 算 符 CS) 会 返回 其 
除 4 以 后 的 余数 ， 该 余数 是 一 个 0 到 3 之 间 的 整数 。 最 后 ， 它 通过 每 次 增加 1 来 进行 基于 1 的 计数 。 
在 第 二 行 代码 中 , 将 host_name 捅 和 人 一 个 字符 串 来 生成 合适 的 返回 值 。 贾 数 中 的 最 后 一 个 值 是 实 
陈 的 返 回 值 , 这 里 不 需要 显 式 地 哲 明 returno 

接着 ，Compass 会 将 该 资源 托管 值 与 被 佟 入 的 地 址 和 任何 绥 存 相连 接 ， 来 生成 完整 的 URL: 

#logo { 


background-image: 
url('http://img-3.example.com/images/logo-small.png?1298578273'); 






































EHHI FEE n] EA M Er RP e P tA ES IR] 资源 托管 一 件 非 篆 简单 的 事情 , 我 们 没有 理 
由 不 采用 。 





8.4.2 ”避免 内 容 警 告 和 基于 域 的 资源 相 混合 


如 果 你 的 站 点 文 持 SSL 访 问 ， 同 时 你 想 要 使 用 资源 托管 ， 非 党 重要 的 一 点 是 确保 你 的 用 户 不 
会 从 浏览 需 中 接收 到 不 安全 资源 的 警告 。 处 理 这 个 问题 的 最 佳 方式 是 使 用 相对 于 协议 的 URL: 
#logo { 


background-image: 
url('//assets3.example.com/images/logo-small.png?1298578273'); 
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你 可 能 会 想 , http: 到 哪 去 了 ? ERRERA http: 2400 EA P — 1 TESI T BMWXLBJURL, 
它 会 使 用 进行 最 初 请 求 时 的 协议 〈 对 样式 表 的 请 求 ) 主要 浏览 需 都 文 持 相对 于 协议 的 URL， 包 括 
IE6。. 为 了 配置 Compass 在 资源 托管 时 使 用 一 个 相对 于 协议 的 URL , 你 需要 在 配置 中 添加 以 下 代码 : 


asset host do |asset| 
host number = (asset.hash $ 4) + 1 
"//img-#{host number)].example.com" 
end 


如 果 你 决定 在 HTML 标 记 中 使 用 相对 于 协议 的 URL, 有 一 点 需要 注意 。IE6 和 IE7 中 的 一 个 bug 
会 导致 一 个 指 癌 相对 于 协议 URL 的 样式 表 <1ink> 标 签 被 下 载 两 次 。 

IE6 和 IE7 在 一 个 叫做 data URI 的 URL 方 面 也 做 得 很 差 。 但 是 这 并 不 总 味 着 你 不 能 给 使 用 较 好 
浏览 需 的 用 户 提 供 性 能 的 提升 。Sass 和 Compass 使 你 能 够 轻松 地 使 用 内 联 data URI- 








8.5 内 联 data URI 


CSS3 的 一 个 神奇 特性 是 ， 你 不 需要 图 片 就 能 创建 出 漂亮 的 效果 ， 但 是 你 依然 依赖 图 片 来 为 
设计 锦上添花 , 引起 人 们 对 重要 部 分 的 关注。 在 本 地 进行 开发 时 , 你 弟 肖 会 坪 了 图 片 并 不 是 即刻 
MAERAH 虽然 在 台式 机 上 ， 低 延迟 的 冤 市 连接 越 来 越 普 衣 ， 然而 国际 浏览 用 户 和 移动 设备 用 
户 肖 第 怀 觉 回 到 了 拨号 上 网 连接 的 年 代 : 低 融 宽 和 高 延迟 的 数据 往返 时 代 再 次 出 现 了 。 

想象 一 下 ， 如 琳 你 提供 的 图 片 内 散在 样式 表 中 ， 你 就 可 以 避免 HTTP 数 据 往 返 的 相应 消耗 。 
羊 好 ， 我 们 已 经 有 了 一 种 叫做 data URI 的 机 制 来 实现 这 种 可 能 性 ， 如 图 8-4 所 示 。 


data:image/gif;base64,ROlGODdhAgACAIAAAAAAAAAAACWAAAAAAgACAAACAORRADs- 


| | | || | 


| | 
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图 8-4 data URI 的 分 解 


图 8-4 展 示 的 URI 代 表 一 张 2x2 像 系 的 黑色 图 片 。 原 图 像 中 的 35 字 节 数 据 已 经 通过 base-64 编 码 
方式 转化 为 了 70 字 节 的 data URI。 将 它 输 入 到 浏览 器 的 URL 框 中 ， 你 会 看 到 一 张 小 图 片 。 

在 CSS 中 使 用 data URI 时 ,你 可 能 会 使 用 一 个 Web 服 务 来 上 传 图 片 并 输出 相应 的 data URI， 然 
后 对 知 要 内 骸 的 每 个 图 片 重复 这 一 过 程 ， 但 是 这 样 的 做 法 耗 时 耗 力 而 且 难 以 维持 。 通 过 使 用 
Compass， 处 理 内 骸 图 片 和 其 他 资源 简直 是 小 亲 一 人 碟 : 

.icon ( background: inline-image("black-dot.png"); ) 

Compass 可 以 基于 图 片 的 扩展 名 找 出 大 多 数 图 片 格式 的 MIME 类 型 ,但 是 如 果 Compass 没 有 识 

别 出 图 片 的 扩展 名 , 并 且 扩 展 名 和 MIME 类 型 的 第 二 部 分 不 相同 , 你 可 以 显 式 地 提供 MIME 类 型 : 
.icon { 


background: inline-image("black-dot.bitmap", "image/bmp"); 


} 
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既然 Compass 可 以 如 此 简单 地 处 理 内 瞬 图 片 ， 并 且 能 够 通过 避免 额外 的 数据 往返 市 来 诸多 好 
处 ， 为 什么 我 们 不 一 直 使 用 这 种 方法 呢 ? 原因 有 以 下 几 点 。 

O 体积 膨胀 一 一 base-64 编 码 算 法 的 效率 并 不 如 普通 的 二 进 制 编码 。 使 用 base-64 编 码 时 ， 数 
据 大 小 会 比 原 来 的 二 进 制 编码 多 出 大 约 20%。 即 使 你 压缩 了 样式 表 , 但 如 果 其 中 包含 了 大 
量 的 内 联 数据 , 编码 消耗 带 来 的 坏处 还 是 远 远 超出 了 HTTP 延 迟 融 来 的 坏处 。 首要 法 则 是 ， 
你 应 该 小 必 任 何 超过 1KB 的 内 诅 数 据 。 

D 缓存 一 一 即使 这 样 的 做 法 加 快 了 速度 , 但 是 内 联 图 片 会 增加 你 的 CSS 文 件 体积 。 一 些 用 户 
代理 也 许 会 选择 不 把 过 大 的 文件 放 入 缕 存 。 例 如 ，iPhone 不 会 绥 存 大 于 25KB 的 文件 。 为 
外 ， 改 变 一 张 内 联 图 片 将 引起 整个 样式 表 发 生 改 变 : 如 果 每 张 图 片 都 需要 一 个 单独 的 请 
求 ， 只 有 那 张 发 生变 化 的 图 片 需要 被 再 次 请 求 。 

口 浏览 器 支持 一 一 IE6 和 IE7 并 不 支持 data URI，IE8 支 持 的 data URI 上 限 为 32KB。 为 了 解决 
这 个 问题 ， 你 可 以 使 用 一 张 备 用 图 片 来 支持 旧版 本 的 浏览 兹 : 


background-image: inline-url("logo.gif"); 














*background-image: image-url("logo.gif"); 

WRR, EHARA i HH PUR PROCHES HE PARC, Mati PERENE” e 
ARA a CREAR IUIS BU DUI Vide, HI DAP a data URI 放 在 一 个 单独 的 样式 表 中 ， 并 将 其 设置 为 
选择 性 连接 。 

如 朱 内 联 图 片 不 能 很 好 地 满足 你 的 需求 ， 羽 一 个 提高 图 片 加 载 速度 的 好 策略 是 使 用 第 6 草 中 
讨论 的 精灵 图 。 

到 目前 为 止 ， 我 们 已 经 看 到 了 几 种 通过 缩小 文件 大 小 和 减少 HTTP 请求 次 数 来 改善 性 能 的 方 
法 。 接 下 来 ， 我 们 将 处 理 训 览 带 泻 染 ， 并 学 习 如 何 优化 Sass 来 提高 选择 从 性 能 。 




















8.6 选择 器 性 能 


碍 看 一 个 JavaScript 文 件 如 何 拖 慢 页 面 速度 很 容易 。 只 需要 做 一 个 无 限 循环 , 你 就 能 看 到 浏览 
侣 忽 然 间 停止 工作 了 。CSS 选 择 禹 没有 循环 ,并 且 比 JavaScript 要 快 得 多 ， 因 此 我 们 很 难看 到 样式 
表 如 何 影 响 Web 页 面 的 加 载 速度 和 总 体 的 响应 能 力 。 除 去 数据 传输 和 解析 样式 表 的 时 间 ， 选 择 各 
的 数目 和 结构 能 对 页 面 速度 产生 微小 却 可 以 衡量 的 影响 。 对 于 一 个 大 型 网 站 来 说 , 这 个 影响 可 能 
会 局 达到 几 日 蝶 秒 。 当 这 几 百 坚 秒 变 成 影响 你 的 网 站 性 能 的 最 坏 因 素 时 ,网 站 就 已 经 处 于 一 个 好 
状态 了 。 

大 多 数 的 性 能 影响 因素 神 人 符合 由 累 托 法 则 : 你 通过 20% 的 工作 得 到 了 80% 的 加 速 。 优 化 选择 
俗 是 在 你 已 经 完成 了 前 面 简单 的 部 分 之 后 才 需 要 进行 的 步 又 。 你 伦 训 了 几 周 时 间 却 可 能 仅仅 减少 
了 100 ms。 对 于 某 些 站 点 ， 人 花费 这 些 努 力 是 有 意义 的 。 但 是 如 朱 你 选择 去 做 ， 你 需要 考虑 进行 一 
些 重新 设计 或 者 重新 组 织 更 大 型 的 模板 ， 来 确保 所 做 的 努力 部 是 值得 的 。 

首先 考虑 页 面 载 和 次序、 服务 硕 啊 应 时 间 ， 以 及 网 络 传输 消耗 ; 之 后 , 才 应 该 考虑 选择 融 方 
面 的 优化 。 


























8.6.1 积 少 成 多 的 问题 


选择 器 速度 很 快 ， 真 的 非常 快 。 但 是 当 你 拥有 上 万 个 选择 需 时 ， 计 算 其 层 大 和 继承 ， 以 及 解 
析 一 个 文档 中 元 素 属 性 的 时 间 却 可 以 到 加 起 来 ， 尤 其 是 当 文 档 本 身 拥 有 许多 元 素 时 。 

选择 顺 的 性 能 之 战 主要 集中 在 两 个 方面 : 修剪 和 匹配 。 在 修剪 方面 , 浏览 器 迅速 确定 并 排除 
所 有 不 会 匹配 某 一 个 特定 元 素 的 选择 器。 在 最 低 限 度 上 , 浏览 需 会 查看 关键 选择 右 OB BU 
是 最 右边 的 选择 吉成 分 )， 来 决定 这 个 选择 需 能 和 否 被 修剪 。 最 近 ， 浏 览 锅 已 经 开始 引入 新 的 修剪 
启发 式 方法 ， 比 如 ID 作用 域 法 。 

在 匹配 方面 , 浏览 锅 会 检查 所 有 不 能 修剪 的 选择 句 , 来 查看 整个 选择 需 是 否 匹 配 元 素 的 文档 
上 下 文 。 这 意味 着 就 后 代 或 者 子 选择 需 查 询 文档 的 层级 ， 或 者 查看 兄弟 元 素 。 

总 的 来 说 , 优化 选择 需 的 一 个 好 方法 是 , 通过 尽量 减少 为 了 决定 选择 需 是 否 匹 配 而 必须 考虑 
的 HITML 元 素数 目 ， 来 确保 降低 选择 需 的 复杂 性 。 


8.6.2 id BRE 


Sass 很 容易 使 许多 选择 需 慢 下 来 。 现 在 我 们 要 告诉 你 : 所 有 用 Sass 编 写 的 、 可 爱 的 、 兄 于 展 
示 的 样式 表 都 在 拖 慢 你 的 页 面 。 

紧凑 易 读 的 Sass 文 件 有 时 可 能 变 成 巨大 的 CSS 文 件 ， 因 此 非常 重要 的 一 点 是 ， 在 编写 Sass 时 
要 时 刻 记 住 最 终生 成 CSS 文 件 的 尺寸 和 复杂 性 。 特 别 是 Sass 新 手 倾 癌 于 使 用 藤 套 选择 顺 来 复制 
HTML 结构 。 这 种 方法 有 其 确定 性 。 最 终 ， 你 将 会 陷入 一 个 比 内 联 样式 更 难 维护 的 情形 中 ， 即 使 
最 小 的 标记 修改 都 会 破坏 你 的 设计 。 而 且 ， 由 于 般 套 时 的 默认 连接 符 是 后 代 连 接 符 〈 空 格 )， 而 
有 日 关 键 选择 右 通 和 常 是 一 个 元 素 选 择 人 种， 这 意味 痢 你 编写 的 样式 正在 生成 最 无 效率 的 选择 右 。 

为 了 帮助 你 识别 异常 膨胀 的 样式 表 ，Compass 提 供 了 一 个 stats 人 命令。 要 使 用 stats 命 令 ， 
必须 首先 安装 一 个 叫做 css_parser 的 Ruby gem: 


$ gem install css parser 


















































然后 运行 Compass 的 stats 命 令 : 

$ compass stats 

你 可 以 看 到 关于 Sass 文 件 的 所 有 有 用 信息 。 下 面 列 出 的 是 一 个 在 Compass 网 站 的 样式 表 中 运 
ficompass stats 命令 的 输出 。( 注意 ， 由 于 格式 的 问题 ， 一 些 列 没 有 在 此 显示 。) 























— ———————— p — —— E E | 
Filename Sass CSS CSS CSS | 

SliZE Selectors Properties Size | 
了 | 
home.scss 387 510 1579 41879 | 
ie.scss 114 3 4 306 | 
Screen.scss 595 932 2846 68575 | 
core/ base.sass 2052 -- -- -- | 
core/ clearing.sass 382 = = -- | 
core/ extensions.scss 192 me = -- | 
partials/ ads.scss 666 -- -- Se i| 
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partials/ blog.scss 84 ue EUM _ 
partials/ code.scss & LOO 一 一 三 二 Le 
partials/_example.scss 483 — 2 _ 
partials/ home.scss 2508 一 一 == — 
partials/ install.scss 603 一 一 2L — 
partials/ layout.scss 683 X 三 三 I 
partials/ main.scss 1840 一 一 E us 
partials/ nav.scss 2085 一 一 三 三 — 
partials/ sidebar.scss 550 = — ea 
partials/ theme.scss 9667 一 一 二 和 
partials/ typography.scss 1824 == 2 — 
Total (18 files): 28815 1445 4429 110760 





























如 你 所 见 , icd S 31 19] RE SITETEH B BJ YeTE a CH DR HE RB AERD. Æ 
FE BJCSSOCUEJUSE- EIER Y o SassfllCompass2y fr $e ptBgd5 BRE, [Hii ES, VE 
负责 任 地 发 挥 它们 的 威力 。 





8.7 


小 结 





在 Web 上 工作 的 一 件 怀 人 之 处 是 , 对 于 每 个 需要 优化 的 部 分 都 有 许多 优化 的 方法 。 不 等 的 是 ， 
如 果 缺 乏 一 个 框架 来 帮助 我 们 快速 地 完成 工作 , 对 其 中 许多 方法 付出 的 努力 将 得 不 偿 失 。 正 如 你 
所 看 到 的 ，Compass 拥 有 很 多 方法 来 调整 你 的 网 站 ， 以 适应 数 千 力 至 数 百 万 访问 者 。 

正如 你 所 学 到 的 ， 作 为 一 位 样式 表 作 者 ， 你 有 很 多 方式 来 加 快 站 点 运行 。 优 化 性 能 并 不 仅仅 
是 服务 右 问 的 问题 , 恰恰 相反 , 对 于 很 多 站 点 , 你 最 终 会 发 现 洛 户 闪 性 能 是 最 难 优化 的 部 分 。S$ass 
和 Compass 能 在 很 多 方面 帮助 你 ， 你 不 感到 高 兴 吗 ? 

在 下 一 章 中 ， 你 将 学 习 到 高 级 的 Sass 技 巧 ， 来 编写 更 智能 、 更 强大 的 样式 表 。 我 们 将 学 习 如 
何 编写 更 好 、 更 灵活 的 混合 天 , 如 何 操纵 颜色 并 进行 高 级 的 数学 计算 , 以 及 如 何 编写 你 目 己 的 Sass 
PKŠ 





























局 级 Sass 4l Compass 


在 前 面 的 三 个 部 分 中 ， 你 已 经 学 到 了 Sass 和 Compass 的 基本 知识 以 及 如 何 将 其 应 用 到 样式 
表 编 写 工 作 流 程 中 。 在 第 四 部 分 中 ， 我 们 将 探索 一 些 Sass 和 Compass 的 高 级 特性 。 第 9 章 将 介 
绍 Sass 怎 样 处 理 数据 类 型 和 表达 式 ， 你 可 以 添加 字符 串 和 值 ， 使 用 智能 的 单位 转换 。 我 们 将 带 
领 你 认识 许多 用 于 处 理 数 值 、 列 表 和 颜色 的 强大 函数 。 你 可 以 看 到 Sass 能 十 分 轻松 地 操纵 颜 
色 ， 让 你 在 样式 表 中 创建 合适 的 动态 主题 。 你 也 将 学 到 如 何 编写 你 自己 的 Sass 函 数 。 最 后 ， 我 
们 会 介绍 如 何 使 用 efor、ewhile 和 eeach 指 令 编 写 循 环 ， 以 及 如 何 使 用 eif 和 eelse 指 令 编 写 
条 件 样 云 。 

第 10 章 将 在 你 之 前 所 学 内 容 的 基础 上 创建 一 个 Compass 扩 展 。 首 先 ， 我 们 将 讨论 分 享 样式 
表 和 前 端 代码 的 不 同方 法 、 它 们 的 缺点 ， 以 及 Sass 和 Compass 怎 样 使 你 简单 地 分 享 优秀 的 可 重用 
样式 表 。 你 将 跟着 我 们 的 进程 一 步 一 步 地 编写 一 个 用 于 创建 漆 亮 CSS3 按 钮 的 高 级 扩展 ， 并 学 到 
如 何 编写 一 个 具有 最 基本 形式 的 扩展 。 在 你 编写 和 重 构 扩 展 时 ， 我 们 会 讨论 编写 扩展 样式 表 的 
设计 策略 和 最 佳 实践 。 我 们 将 讨论 发 布 扩 展 的 不 同方 式 ， 你 将 学 习 到 如 何 轻松 地 创建 一 个 Ruby 
gem 来 帮助 你 分 发 扩展 。 最 后 ， 人 简单 地 看 一 看 如 何在 Github 上 分 享 并 省 理 你 的 开源 项 目 。 

谈 完 本 书 ， 你 将 对 如 何 使 用 Sass 和 Compass 编 写 更 智能 、 更 具 可 维护 性 的 样式 束 有 一 个 透彻 
的 理解 。 你 可 以 使 用 一 系列 强大 的 新 工具 和 新 视角 来 解决 Web 设 计 中 的 难题 。 通 过 开源 分 享 你 
的 想法 和 发 现 ， 你 也 会 了 解 到 如 何 更 简单 地 参与 到 设计 社区 中 来 。 编 写 无 聊 样 式 表 的 日 子 已 经 
一 去 不 复 返 了 ， 等 待 你 的 将 是 令 人 激动 的 新 挑战 。 
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本 章 内 容 

口 操纵 Sass 理 解 的 CSS 值 

O 使 用 Sass 的 内 建 浮 数 编写 高 级 的 数学 和 颜色 主题 
O xE XR E GERADE RE E YE. 

a 使 用 控制 指令 来 创建 高 级 、 可 重用 的 混合 需 








上 一 章 介 绍 了 如 何 优化 样式 表 ， 从 而 在 浏览 各 中 达到 最 佳 性 能 。 在 本 章 中 ,你 将 学 到 如 何 从 
可 读 性 和 可 维护 性 的 角度 优化 Sass， 以 及 如 何 突 破 CSS 的 限制 编写 出 更 加 智能 的 样式 表 。 

你 已 经 知道 了 Sass 给 普通 CSS 币 来 的 诸多 好 人 处。 变量 、 骸 合法 则 和 混合 各 都 使 得 CSS 的 重复 
减少 了 。 尤 其 是 混合 带 ， 它 是 一 种 重 构 样式 表 中 重复 样式 和 模式 的 好 方法 ,使 样式 得 以 重用 。 

但 是 变量 和 混合 需 本 吴 只 能 针对 你 在 样式 表 中 使 用 的 表达 模式 。 有 时 你 想 要 避免 一 过 又 一 过 
的 宽度 计算 ， 或 者 想 要 一 个 在 不 同 的 条 件 下 拥有 细微 样式 差别 的 混合 咒 。 为 此 ， 你 需要 Sass 中 更 
加 高 级 的 脚本 特性 ， 本 和 草 将 对 此 进行 介绍 。 

高 级 Sass 用 法 的 核心 是 操纵 CSS 值 ( 作为 属性 值 出 现 ) 的 能 力 。Sass 文 持 你 在 小 时 候 学 到 的 
所 有 算术 : 加 法 、 减 法 、 乘 法 和 除法 。 它 甚至 能 够 理解 单位 ， 知 道 5px+10px =15px。 

Sass 同 样 能 够 理解 其 他 所 有 的 CSS 数 据 类 型 ， 例 如 颜色 、 名 字 (例如 bold 或 者 center ) 和 
列表 (例如 1px solid black 或 者 font，font，font )。 它 同时 还 拥有 一 个 目 己 的 数据 类 型 来 
表示 true 和 false， 用 来 决定 应 该 使 用 哪个 样式 。 

除了 数值 计算 ，Sass 还 主要 通过 函数 来 操纵 CSS 值 。 除 了 rgb 或 hs1 等 内 建 CSS 函 数 ，Sass 增 
加 了 一 系列 目 己 的 函数 来 做 很 多 有 用 的 事情 。 其 中 的 很 多 函数 在 复杂 脚本 的 上 下 文中 很 有 用 , 但 
是 有 一 些 在 单独 使 用 时 也 很 有 8 用 ,尤其 是 那些 操纵 颜色 的 函数 。 这 些 函 数 功 能 足够 强大 ， 能够 用 
一 两 个 基本 色 来 生成 整个 主题 的 色 值 。 

Sass 同 时 还 允许 在 属性 以 外 的 地 方 使 用 CSS 值 和 Sass 变 量 。 使 用 一 种 特殊 的 语法 能 够 将 其 包 
Ta TEXTE RU& TEMP. 在 需要 将 选择 器 名 或 者 属性 名 作为 参数 传递 给 一 个 混合 右 时 ,这 种 方法 
很 有 用 。 

CSS 值 最 高 级 的 用 法 是 控制 结构 。 控 制 结构 允许 你 控制 样式 是 否 被 使 用 ,以 及 在 不 使 用 混合 
器 的 条 件 下 为 同一 个 样式 生成 多 个 变量 。 如 果 曾 经 使 用 过 JavaScript 或 者 其 他 编程 语言 , 你 一 定 很 
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束 悉 控制 结构 。 但 是 如 果 你 没有 使 用 这 些 编程 请 言 的 经 验 ， 也 不 要 害 代 。 虽 然 这 是 Sass 的 高 级 用 
E. EURSCHIMR EDUU ER 


9.1 使 用 表达 式 


表达 式 是 在 Sass 中 操纵 CSS 值 的 最 普遍 方式 。 什 么 是 表达 式 ? 只 要 能 放 在 属性 右边 的 部 可 以 
称 为 表达 式 。 在 普通 的 CSS 中 ， 表 达 式 通 弟 是 一 个 简单 的 值 ， 比 如 bolgd 或 5px,， 或 者 一 个 值 的 列 
表 ， 比 如 1px solid black。 在 Sass 中 ， 表 达 式 不 仅 能 包含 变量 ,也 能 包含 数学 运算 符 ; 相关 
内 容 我 们 将 在 本 章 中 提 到 。 

尽管 所 有 类 型 的 值 都 能 在 表达 式 中 使 用 , 它们 和 数字 一 起 使 用 时 最 有 用 。 你 可 以 像 做 算术 一 
样 使 用 数值 表达 式 ， 可 以 使 用 +、-、* 和 /等 符号 来 进行 加 减 乘除 运算 。 操 作 符 的 顺序 也 和 算术 
中 一 样 : * 和 / 比 + 和 -优先 运算 ， 括 写 中 的 表达 式 先 运算 。 在 下 面 的 样式 中 ， 我 们 使 用 乘法 和 减 
法 来 创建 一 个 简单 的 网 格 系统 ， 如 代码 清单 9-1 所 示 。 


代码 清单 9-1 使 用 Sass 表 达 式 


Sgrid-cells: 20; 
S$cell-width: 25px; 
#main { 
Smain-width: Sgrid-cells * $cell-width; 
$main-padding: 10px; 
width: $main-width; 
padding: $main-padding; 
.sidebar (width: ($main-width - $main-padding*2)/4} 
} 


表达 式 可 以 出 现在 属性 或 变量 值 中 的 任何 地 方 , 不 需要 占 满 这 些 值 。 这 对 于 合并 属性 来 说 非 
TI. 像 是 porder 或 packground, 它们 由 被 多 个 用 空格 分 隅 开 的 属性 值 组 成 。 比 如 下 面 的 例 
T: 

border: ($something - $something-else) solid blue 

HT $something - $5something-elsel JH 5px, 属性 就 变 成 了 5px solid blue, df 
号 并 不 是 必须 的 ， 但 是 添加 上 括号 以 后 更 多 于 阅读 。 

既然 你 已 经 看 到 了 表达 式 的 运作 方式 ， 那 就 让 我 们 回 到 CSS 和 Sass 中 使 用 的 数据 类 型 ， 看 看 
它们 在 Sass 的 表达 式 中 都 能 做 些 什 么 。 


9.2 理解 数据 类 型 


CSS 属 性 或 Sass 变 量 中 的 每 个 值 都 有 一 个 类 型 ， 类 型 不 同 ， 运 作 方 式 也 不 一 样 。#abcdef 或 
violet 等 值 代表 颜色 ， 用 来 为 文本 、 背 景 、 边 框 等 春色 。100s 或 5px 之 类 的 值 代表 数值 ， 用 来 
WEE. 外 边 距 和 内 边 距 。 center 或 auto 之 类 的 值 代表 许多 不 同 的 东西 ， 通 稼 是 蔡 换 值 的 一 
个 选择 或 者 是 一 个 特殊 值 。 
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Sass 能 理解 所 有 的 这 些 类 型 ， 并 根据 这 种 理解 对 表达 式 中 的 值 进行 不 同 的 操作 。 操 纵 不 同类 
型 的 值 有 不 同 的 方式 , 但 是 所 有 的 类 型 部 在 某 种 程度 上 支持 算术 运算 和 从 (+、-、* 和 /)。 在 本 市 中 ， 
我 们 将 深入 分 析 每 种 类 型 以 及 它们 使 用 运算 符 的 方式 。 





9.2.1 字符 串 和 和 名字 


字符 串 是 CSS 中 最 弟 见 的 数据 类 型 。 之 所 以 称 其 为 字符 串 , 是 因为 它们 仅仅 是 字符 连 成 的 串 。 
名 宇 仅 仅 是 一 个 字符 串 ,例如 bold auto, center, wA SSAA FIRU, MU "Helvetica 
Neue" 。 前 者 是 无 引号 字符 串 ， 后 者 是 有 引号 字符 串 。 

除了 引号 本 号, 有 引号 和 无 引号 字符 串 之 间 的 主要 差别 还 在 于 哪些 字 
一 部 分 。 有 引号 字符 串 可 以 包含 除 " 以 外 的 任何 字符 ; 而 无 引号 字符 串 不 
头 ， 也 不 能 包含 空格 以 及 一 些 特殊 字符 ， 如 * 或 &"。 

Sass 还 将 男 外 几 个 特殊 的 构造 看 成 是 字符 串 。 最 和 耳 观 的 一 个 是 !important, 一 般 来 说 ,， 它 
不 能 被 归 为 无 引号 字符 串 ( 因为 它 以 5 开头 ), 但 是 Sass 还 是 将 它 归 入 无 引号 字符 串 的 行列 。ur1 () 
的 值 同样 被 认为 是 一 个 无 引号 字符 串 ， 人 尽管 (和 ) 等 特殊 字符 通 稼 不 允许 在 URL 中 出 现 。 但 是 
url ($variable) 不 被 认为 是 一 个 字符 串 ， 主 要 是 因为 它 在 url () 中 包含 了 $variable 的 内 容 。 

IE 浏 览 帮 中 特定 的 滤 镜 值 同样 被 认为 是 字符 串 ， 因 为 根据 CSS 标 准 ( 也 是 Sass 解 析 融 参照 的 
标准 )， 它 们 其 实 都 不 合乎 语法 。 因 此 ,progid:DXImageTransform.Microsoft.gradient 
(startColorstr=#550000FF,，endColorstr=#55FFFF00) 被 认为 是 一 个 巨大 的 无 引号 字符 
串 。 同 样 ，CSS3 中 的 calc () 函数 目前 也 被 认为 是 一 个 字符 串 。 

最 党 用 的 字符 串 操 作 符 是 +。 当 我 们 将 一 个 字符 串 加 到 另外 一 个 值 上 面 ， 无 论 该 值 是 否 为 字 
符 串 ， 这 两 个 值 都 会 连接 起 来 形成 一 个 新 字符 串 ( 见 表 9-1 )。 如 有 果 字 人 符 串 奏 有 3 引号， 结果 就 市 有 
引号 ; 否则 ,不 囊 引 号 。 如 采 两 个 住 都 是 字符 串 ， 其 中 一 个 市 引号 而 另 一 个 不 市 引号 ， 那 么 结 末 
字符 串 是 否 带 引号 ， 取 决 于 左边 的 字符 串 。 


表 9-1 在 字符 串 中 使 用 + 操作 符 




















符 可 以 成 为 字符 串 中 的 
能 以 数字 和 特殊 字符 开 


































































































A X X 结 果 
foo + 1 Lool 
"foo" + 1 "fool" 
foo + bar foobar 
"foo" + "þar" "foobar" 
"foo" + bar "foobar" 
foo + "bar" foobar 





AEQUUS PRESHBASSCREXAT BS ATERA, -W/K EES RRRA 
接 起 来 ,但 是 操作 和 从 本 里 会 包含 在 结 玉 字符 串 中 ( 见 表 9-2 )。 











J 这 条 规则 也 有 例外 的 情况 ， 但 是 这 属于 CSS 部 分 的 知识 ， 超 出 了 本 书 的 范围 。 
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表 9-2 操作 符 - 和 /在 字符 串 中 与 + 作用 相同 


表 达 式 结 R 

foo - bar foo-bar 

foo / bar foo/bar 
和 字符 串 一 样 ， 数 值 也 是 CSS 和 Sass 中 的 常用 数据 类 型 。 


9.2.2 ”数值 
在 Sass 以 及 CSS 中 ,数值 包括 两 部 分 : 实际 的 数值 以 及 (可 选 的 ) 单位 。 毅 用 的 单位 包括 px， 


em 和 g%。 

由 于 Sass 能 够 理解 佛 有 单位 的 数值， 所 有 的 操作 符 都 能 和 单位 一 起 使 用 。 这 里 遵循 科学 运算 
中 的 单位 处 理 方法 : 当 对 珊 有 单位 的 数值 做 乘法 和 除法 时 ， 单 位 也 和 数 信 一 起 做 乘法 或 者 除法 。 

这 意味 着 5em* 4px 的 结果 是 2 Oem*px, M 99px/ 1in 的 结果 是 99px/ in". 

AARNE RRM EK AH AU, 如果 你 设置 了 $pixels-per-em:16px/1em, Xn] 
以 通过 5emx*S$pixels-per-em 来 计算 Sem 是 多 少 像 系 。 得 出 80px*em/em， 两 个 sm 可 以 约 分 ， 
此 结果 是 80px。Sass 可 以 目 动 完成 这 些 处 理 。 

做 加 法 或 减法 时 ， 结 果 并 不 总 是 有 合适 的 单位 。 例 如 ，5px+10g 就 没有 什么 意义 ， 因 为 Sass 
不 知道 怎么 在 像素 和 百分比 之 间 转 换 ”。 在 这 些 情 形 下 ，Sass 会 抛 出 错误 。 但 是 如 果 Sass 知 道 如 何 
在 单位 〈 例 如 in 和 cm ) 之 间 进 行 转换 ， 它 会 目 动 帮 你 转换 。 

大 多 数 数 值 运算 符 的 作用 与 我 们 在 学 校 中 学 到 的 相同 。 除 此 之 外 ， 还 有 一 个 (有 点 复杂 的 ) 
运算 符 : 取 模 。 取 模 瑟 作 %， 它 能 计算 出 两 个 数值 相 除 之 后 的 余数 。 因 此 $num1% Snum2 的 结 末 
是 Snuml1/snum2 的 余数 。 这 个 运算 符 用 处 不 大 。 

当 我 们 在 数值 计算 中 使 用 /操作 符 时 ， 会 出 现 一 点 复杂 的 情况 。CSS 人 允许 特定 值 被 一 个 正 斜 
FE CAO 分 开 , 在 这 种 情形 中 , 正 斜 杠 并 不 代表 除 号 。 这 在 实际 情况 中 很 少 会 用 到 , 但 是 既然 Sass 
表达 式 是 CSS 的 一 个 超 集 ， 它 需要 文 持 这 种 语法 ， 而 不 是 将 两 个 数字 相 除 。 

Sass 处 理 这 种 情况 的 方式 是 使 用 几 个 简单 的 规则 来 决定 是 使 用 除法 还 是 使 用 一 个 普通 的 / 
( 正 斜 杠 )。 如 有 果 两 值 中 有 任意 一 个 是 字符 串 ， 结 采 将 使 用 一 个 普通 的 正 斜 杜 。 否 则 ， 只 要 以 下 满 
足以 下 三 个 条 件 中 的 任意 一 个 ，S$ass 都 将 进行 除法 运算 : 

口 在 /的 任意 一 边 使 用 一 个 变量 ; 

口 整个 值 被 小 括 写 包围 ，; 

口 该 值 被 用 作 其 他 算术 表达 式 的 一 部 分 。 

例如 ， 在 下 面 的 表达 式 中 ，/ 不 表示 除法 : 


1px/2px => 1px/2px 


但 是 在 下 面 三 个 例子 中 ，/ 表 示 除 法 : 





















































(D 注意 ，px*em 和 px/in 是 不 合乎 Sass 语 法 的 ， 为 了 获得 这 些 值 ， 你 必须 使 用 数值 进行 乘 或 除 运 算 。 
(2) Sass 也 支持 CSS3 中 的 calc O 函数 ， 这 个 函数 能 完成 这 种 计算 ,但 这 是 因为 浏览 絮 了 解 有 关 布 局 的 所 有 信息 。 
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Svar: lpx; Svar/2px => 0.5px 
(1px/2px) => 0.5px 
1 + (1px/2px) => 1.5px 


尽管 用 到 数值 的 机 会 更 多 ， 但 颜色 也 是 Sass 最 有 趣 的 数据 类 型 之 一 。 
9.2.3 颜色 


CSS 中 的 颜色 可 以 写成 许多 不 同 的 形式 。 最 和 用 的 是 使 用 RGB 通道 的 十 六 进 制 表示 法 : 
#abcdef 表 示 171 红 色 ，205 绿 色 ， 以 及 239 蓝 色 。 你 也 可 以 使 用 一 个 函数 来 表示 同样 的 信息 : 
rgb(171,205,239) 。 另 外 ,， 也 有 一 些 经 过 命名 的 颜色 ， 例 如 blue 和 violet， 它 们 更 具有 描述 
性 ,但 是 可 选择 的 种 类 比较 少 。hs1 () 函数 和 rgb() 了 艺 数 相似 ,但 前 者 拥有 更 多 有 用 的 特性 。 最 
后 ，rgba() 和 hsla() 分 别 与 rgb() 和 hs1() 类 似 , 但 是 它们 都 允许 在 指定 颜色 时 设置 一 个 alpha 
透明 度 值 。Sass 能 理解 所 有 这 些 形式 。 

不 论 最 初 的 颜色 值 以 何 种 形式 表示 ，Sass 内 部 会 同时 使 用 RGB 和 HSL 来 表示 颜色 。 这 对 于 我 
们 将 在 9.3.2 节 中 谈 到 的 颜色 操纵 哨 数 很 有 帮助 ， 它 们 中 的 许多 都 对 颜色 的 HSL 属 性 进行 操作 。 

过 去 ， 颜 色 文 持 使 用 +*、- 、* 和 /操作 符 以 及 数字 和 其 他 颜色 进行 运算 。 但 是 这 些 操作 符 既 
不 直观 也 不 是 很 有 用 ， 因 此 在 9.3.2 节 讨论 的 颜色 因数 中 ， 这 些 操作 符 都 不 再 使 用 了 。 

我 们 下 面 要 讨论 的 数据 类 型 是 列表 。 尽 管 列 表 与 颜色 都 经 名 在 CSS 和 Sass 中 出 现 ， 但 你 可 能 
还 不 习惯 将 列表 作为 整体 来 看 待 。 列 表 在 清除 重复 样式 方面 大 有 作为 。 






































9.2.4 列表 


列表 是 一 个 数值 的 序列 ,用 来 表示 bordqezr 或 者 background 等 属性 .例如 ,1px solid black 
是 包含 三 个 数值 的 列表 ， 你 可 以 将 它 用 于 border 属 性 。 列 表 中 的 值 用 空格 隔 开 ， 正 如 这 个 例子 
所 示 ; 或 者 用 逗号 隔 开 ， 例 如 font， font, font. 

准确 地 说 ，Sass 中 的 列表 必须 包含 至 少 一 个 项 目 。 但 是 单个 的 值 也 被 视 为 包含 具有 列表 所 有 
性 质 的 单个 项 目 ， 这 些 值 包括 列表 也 数 和 @each 这 样 的 控制 指令 ， 本 章 后 面 将 涉及 这 些 内 容 。 

尽管 CSS 的 列表 只 能 包含 个 别 的 值 ， 但 是 Sass 中 的 列表 可 以 包含 其 他 列表 。 其 中 最 清楚 的 表 
述 方式 就 是 在 用 逗号 隐 开 的 列表 中 加 入 用 空格 阳 开 的 列表 。, 例 如, 列表 foo bar, baz bang, bip 
bap 包 含 三 个 元 系 : foo bar, baz bang 和 bip bap。 其 中 每 一 个 元 每 也 是 列表 ， 分别 包含 两 
个 单词 。 

列表 中 也 可 以 使 用 括号 来 般 套 同类 型 的 其 他 列表 ， 比 如 (foobar) (baz bang) (bip bop) 
和 (foo，bar)，(baz，bang)，(bip，bop)， 它 们 都 是 由 三 个 包含 两 个 元 素 的 列表 组 成 的 列 
表 。 当 包含 列表 的 列表 被 转换 成 CSS 时 ， 插 写 会 彼 移 除 ， 以 保证 结果 是 有 效 的 CSS。 

算术 操作 符 对 列表 来 说 没什么 用 , 尽管 可 以 在 列表 中 使 用 , 但 也 只 能 将 列表 简单 地 转换 为 无 
引号 字符 串 ， 此 时 会 使 用 相应 的 字符 串 操 作 符 。 

列表 真正 的 有 用 之 处 体现 在 两 个 方面 。 第 一 ， 它 使 用 eeach 指 令 使 代码 更 加 简练 ， 该 指令 的 
讲解 参见 9.5.2 市 。 第 二 ， 可 以 用 它 将 更 加 复杂 的 参数 传递 给 混合 颖 ， 然 后 这 些 参数 就 能 被 Sass 隆 
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数 所 用 ，9.3.3 节 将 涉及 这 一 点 。 
Sass 中 的 最 后 一 种 数据 类 型 并 非 来 源 于 CSS , 但 是 引入 它 可 以 让 混合 器 使 用 逻辑 和 做 出 选择 。 





9.2.5 布尔 值 


布尔 值 以 逻辑 学 家 乔治 ' 布尔 命名 ,用 来 代表 真 值 。 布 尔 值 只 有 两 种 : true 和 false。 它们 
在 Sass 中 《连同 eif 指 令 ; 我 们 将 在 9.5.3 市 中 讲述 @if 指 令 ) 用 来 决定 应 该 使 用 哪 种 样式 。 

布尔 值 不 使 用 算术 操作 符 ， 它 们 有 目 己 的 操作 符 : anda、or 和 not。 这 些 操作 符 都 很 直观 : 
如 果 sboo11 和 sbool12 都 为 true， 那 么 Sbool1 and $bool27jtrue; 如果 spool11 或 者 Sboo12 
其 中 一 个 为 true， 那 么 Sbool1l or $boo12 为 true。not 操 作 符 只 在 一 个 值 上 进行 操作 ， WDR 
sboo1l1 为 false， 那 么 hot sbool 为 true; 反之 ， 则 not sbool 为 false。 

事实 上 ，and、or 以 及 not 操 作 符 可 以 和 任何 类 型 的 值 一 起 使 用 ， 尺 管 它们 和 布尔 值 一 起 使 
用 时 最 有 用 。 对 于 anda、or 和 not 探 作 符 来 说 ， 效 字 、 颜 色 、 字 符 串 和 列表 都 被 看 做 是 true。 在 
使 用 非 布尔 值 时 , 操作 符 and 和 or 返回 的 结果 也 是 非 布尔 值 : 除非 $val1 为 false, 则 $vall ana 
sval2 将 返回 $val2;: 只 有 Svall 为 false， $vall or $val2 才 会 返回 Sval2。 

有 一 些 作用 在 其 他 类 型 上 的 操作 和 罕 也 返回 布尔 值 ， 如 表 9-3 所 示 。 


表 9-3 返回 布尔 值 的 操作 符 











| 作 符 & x 
< 小 于 
= 小 于 或 等 于 
> 大 于 
= 大 于 或 等 于 
和 完全 相等 


小 于 和 大 于 操作 符 只 作用 于 数字 ,但 是 == 操 作 符 可 以 作用 于 全 部 类 型 *。 这 些 操 作 符 都 返回 
布尔 值 。 

对 于 许多 数据 类 型 来 说 ， 操 作 符 并 不 足以 让 用 户 充 分 利用 这 些 类 型 。 鉴 于 此 ，Sass 通 过 消 数 
来 弥补 这 一 点 ， 并 展现 出 了 更 多 的 脚本 功能 。 





9.3 ”函数 


Sass 中 的 函数 可 以 对 一 个 或 多 个 值 ( 交 量 ) 进行 特殊 操作 。 它 们 使 用 的 语法 和 诸如 rgb () 或 
者 hs1 () 的 CSS 函 数 类 似 ,但 是 它们 被 看 做 Sass 表 达 式 的 一 部 分 ， 而 且 返 回 的 是 Sass 值 。 
和 CSS 孙 数 不 同 ，Sass 函 数 可 以 使 用 关键 子 变 量 。 这 意味 着 我 们 并 不 是 通过 参数 的 顺序 来 指 





(D 回忆 一 下 ，Sass 能 够 理解 所 有 颜色 的 RGB 和 HSL 值 ， 因 此 blue、#0000fE 和 hs1l1(240,100,50) 在 == 操 作 符 看 来 
都 是 同一 种 颜色 。 
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明 参 数 ， 而 是 可 以 显 式 地 命名 几 个 或 者 所 有 的 变量 。 该 特性 的 语法 是 Sname : value, SAWA 
子 和 函数 一 起 列 出 。 这 对 于 拥有 许多 参数 的 子 数 来 说 尤为 有 用 , 你 不 需要 记 住 哪个 参数 应 该 放 在 
什么 位 置 : 

rgb (S$green: 127, $blue: 127, $red: 255) 

Sass 设 计 哲 学 的 一 个 重要 方面 是 : An RE T EA DUM LERRA, MEE 
也 不 要 尝试 去 了 解 。 因 此 ， 如 果 你 使 用 了 一 个 Sass 无 法 识别 的 函数 ，Sass 会 认为 它 是 一 个 普通 的 
CSS 函 数 并 不 加 转换 地 进行 传递 〈 人 参数 除外 )。 所 以 ， 在 输入 函数 名 时 打 错 字 将 是 一 件 非常 烦人 
的 事情 ,一定 要 牢 牢 记 住 这 一 点 。 

大 多 数 的 Sass 内 建 函 数 都 被 设 计 为 可 以 在 不 同 的 场景 中 广泛 使 用 , 但 并 不 能 保证 能 够 处 理 所 
有 数值 或 颜色 的 操作 。 因 此 ，Sass 允 许 用 户 定 义 目 己 的 函数 ， 它 的 定义 方式 和 定义 混合 问 的 方式 
类 似 。 用 户 目 定义 函数 将 在 本 方 的 结尾 讲 到 。 

大 量 Sass 了 负数 被 设计 出 来 帮助 你 轻松 目 定 义 也 数 和 混合 各 。 许 多 Sass 的 数字 函数 在 用 户 日 常 
的 设计 工作 中 并 不 是 很 8 用 ,但 是 当 你 在 编写 一 个 找 出 网 格 守 度 的 函数 时 可 以 从 中 获得 一 些 帮 
助 。 类似 地 , 大 量 的 函数 可 以 用 来 提供 关于 值 的 信息 , 以 便 函 数 和 混合 带 基 于 这 些 信息 做 出 决定 。 

在 本 方 ， 我们 将 介绍 大 部 分 第 用 的 Sass 内 建 函 数 ， 然 后 讨论 如 何 编写 你 自己 的 函数 。 我 们 将 
从 数值 孔 数 开始 讲解 ， 其 次 是 颜色 函数 和 列表 函数 ， 最 后 概述 无 法 归 入 特定 类 别 的 函数 。 




































































9.3.1 数值 函数 
Sass 中 有 一 些 函 数 可 以 使 处 理 数值 的 工作 变 得 轻松 ， 尤 其 是 在 需要 频繁 使 用 Sass 编 写 样式 表 
的 时 候 。 目 前，Sass 中 并 没有 与 复杂 数学 操作 相关 的 函数 , 例如 指数 函数 、 对 数 函数 和 三 角 函 数 ， 
因为 这 些 复杂 的 数学 运算 在 样式 表 中 几乎 没有 什么 用 。 如 果真 的 需要 使 用 这 些 运算 ， 可 以 通过 
Ruby 扩 展 API 轻 松 地 添加 它们 。 表 9-4 列 出 了 我 们 将 要 讨论 的 函数 。 
表 9-4 ”用 于 数值 的 函数 











"E LN: 
abs ($number) 取 snumbez 的 绝对 值 
ceil($number) $number[n] E 
comparable($number-1, $number-2) 返回 snumber-1 和 snumber-2 是 否 能 比较 
floor ($number) snumber 问 下 取 整 
percentage ($number) 将 小 数 snumber 转 换 为 百分数 
round ($number) 将 Snumber 转 换 为 最 接近 的 整数 
unit ($number) 返回 snumbez 的 单位 
unitless ($number) 返回 Ssnumber 是 否 没 单位 


其 中 的 三 个 Sass 数 值 函 数 将 约 数 转化 为 整数 。 不 像 其 他 的 一 些 编程 语言， 当 你 在 Sass 中 将 两 
个 数 相 除 时 ， 结 来 通 第 是 一 个 小 数 而 不 是 一 个 整数 。 通 第 情况 下 ， 这 就 是 你 想 要 的 结 霖 , 但 是 有 
时 你 想 要 一 个 整数 。 约 数 函 数 就 是 用 来 处 理 这 种 情况 的 。ceil ($number) ( 取 上 整数 ) HER 




















整数 ，floor ($number) h] FRÆ, round ($number) 四 舍 五 人 取 最 近 的 整数 。 

和 和 约 数 函 数 相 似 的 是 abs ($number) , 它 用 来 返回 一 个 数字 的 绝对 值 , 如 果 snumber 是 正 数 ， 
abs 返 回 这 个 正 数 本 身 ; 如 条 Snumber 是 负数 ，abs 返 回 Snumpbezr 的 相反 数 。 

percentage ($number) 是 男 一 种 类 型 的 浮 数 。 它 接收 一 个 小 数 (例如 0.6，0.33， 或 者 1.3 )， 
然后 返回 一 个 百分数 。 因 此 0.6 变 为 60% , 0.33 变 为 33%, 1.3 变 为 130%。 它 的 作用 和 $number*100% 
相同 ,但 是 阅读 起 来 更 容易 。 

Sass 中 也 有 一 些 数 值 也 数 用 来 提供 关于 一 个 或 多 个 数值 的 信息 unit ($number) 将 一 个 数值 
的 单位 作为 一 个 字符 串 返 回 , 当 一 个 混合 需 的 参数 单位 发 生 错误 需要 输出 错误 信息 时 , 这 相当 有 用 。 
如 果 数 值 没有 单位 , Wilunitless(Snumber)ik|"true, 否则 返回 false。 comparable ($number-1, 
$number-2) 基 于 两 个 数字 的 单位 ， 返 回 两 个 数字 能 否 相 加 和 比较 。 例 如 ，comparable (13in,， 
5cm) 返回 true， 因 为 英寸 和 厘米 可 以 相互 转换 ; 但 是 comparable (5px，10%) 返 回 false， 
为 像素 和 百分率 不 能 用 同一 标准 来 衡量 。 

总 体 上 来 说 ，Sass 中 的 数值 也 数 处 理 的 都 是 普通 的 数学 操作 ， 而 Sass 处 理 颜色 的 函数 则 更 加 















































9.3.2 ”颜色 函数 


Sass 中 的 颜色 函数 可 以 大 体 分 为 两 类 : 返回 闫 色 信 息 的 卫 数 , 将 旧 颜 色 转 换 为 新 颜色 的 函数 。 
表 9-5 列 出 了 所 有 的 颜色 函数 ， 并 将 它们 归 类 到 了 信息 和 转换 两 大 类 中 : 


表 9-5 用 于 颜色 的 函数 














E A 类 m "EET 

alpha ($color)/opacity($color) Informative 返回 scolor 的 alpha 通 道 

blue(scolor) Informative 返回 scolor 的 蓝 色 通道 

green (Scolor) Informative 返回 scolor 的 绿色 通道 

hue ($color) Informative 返回 scolor 的 色 度 属性 

lightness ($color) Informative 返回 scoloz 的 亮度 属性 

red (Scolor) Informative 返回 scolor 的 红色 通道 

saturation($color) Informative 返回 scolor 的 饱和 度 属 性 

adjust($color, ...) Transformative 按照 给 定 的 颜色 成 分 值 调整 scolor 的 各 个 属性 

complement ($color) Transformative 返回 $color 的 色 环 与 Scolor 的 互补 

grayscale($color) Transformative ”返回 Scolor 的 灰 度 版 本 

invert ($color) Transformative ”返回 Scolor 的 反 相 版 本 

mix($color-1, $color-2, [$weight]) Transformative 按照 sweight 的 百分比 将 scolor-1 和 scolor-2 混 
合 在 一 起 ， 返 回 混合 后 的 颜色 

scale($color, ...) Transformative 按照 百分比 调整 scolor 的 各 个 属性 


set(S$color, ...) Transformative 将 scolor 的 各 个 属性 设置 为 固定 值 
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你 在 9.2.3 节 中 了 解 到 ， 无 论 创 建 方式 如 何 ， 所 有 的 Sass 颜 色 都 能 理解 其 RBG 和 HSL 值 。 信 息 
哨 数 让 你 可 以 直接 获取 这 些 值 的 单独 成 分 : 红 、 绿 、 蓝 、 色 度 、 饱 和 度 和 亮度 , 以 及 alpha 通 道 ( 通 
常 是 1， 表 未 一 个 完全 不 透明 色 ， 除 非 该 颜色 由 rgba () 、hsla() 或 者 特定 的 Sass 函 数 创建 )。 这 
些 困 数 以 其 返回 的 成 分 名 称 来 俞 名 : red($color), green($color), blue($color), 
hue(scolor)、saturation(scolor)、1ightness(scolor) 和 alpha(scolor) (也 可 以 写 





成 opacity ($color) )。 

以 上 每 个 函数 都 返回 一 个 特定 成 分 的 值 ， 返 回信 的 形式 与 传递 给 z*gb O 和 hsl () 函数 的 参数 
值 形式 相同 。 因 此 , redq() 、green () 和 blue () 返 回 位 于 0 到 255 之 间 的 数 ，hue () 返回 一 个 位 于 
0deg 到 359deg" 之 间 的 数 ，saturation() 和 1lightness () 返 回 位 于 0% 到 100% 之 间 的 数 ， 而 
alpha () 返回 一 个 位 于 0.0 到 1.0 之 间 的 数 。 

FeR PRU EG fe E Gs HIR YR] ^, 因为 它们 可 以 快速 而 简单 地 生成 漂 腕 的 颜色 主 题 。 最 
有 用 的 两 个 函数 是 adjust ($color) 和 scale ($color)。 这 两 个 函数 都 接受 一 个 颜色 作为 第 一 
个 参数 , 后 面 的 参数 是 一 列 描述 如 何 转换 该 颜色 特定 成 分 的 关键 字 。 这 两 个 国 数 对 每 种 成 分 取 一 
个 关键 字 参 数 ( 例如 sred、$saturation、salpha )， 但 是 它们 处 理 参数 的 方式 不 同 。 

adjust($color,...) 困 数 通过 给 定 的 数值 ， 增 加 或 者 减少 一 个 或 多 个 成 分 的 值 。 因 此 ， 
adjust ($color, $red: 20, Salpha: -0.5) 将 scolor 的 红色 成 分 增加 20， 将 不 透明 度 减 少 
0.5。 同 样 地 ,aqdjust ($color, $lightness: 15%, $hue: 10deg ) 将 亮度 增加 15% C 新 亮度 
为 旧 亮 度 加 15% )， 并 将 色 度 增加 10 度 ”。 

scale($color,...)PKWZfllaajust () 图 数 类 似 ， 但 是 它 接 受 所 有 成 分 的 百分率 作为 参数 。 
不 像 aqjust () 一 样 通过 一 个 固定 的 数值 来 增加 或 减少 成 分 ，scale () 通 过 给 定 的 百分数 来 流畅 
地 设 定 这 些 成 分 的 值 。 因 此 ， 不 管 原 来 的 亮度 是 多 少 ，scale(S$color,Slightness: 30%) 将 
使 得 $Scoloz 的 亮度 增加 30%4 更 接近 纯 白 30% ) 如 果 初 始 的 亮度 数值 较 高 ,scale() 比 aqjust () 
要 更 好 : 例如 一 个 颜色 已 经 有 了 80% 的 亮度 ，adjust O 会 使 得 该 颜色 变 为 纯 白 〈 亮度 为 100% ), 
而 scale() 只 会 使 腕 度 变 为 86%。 和 adjust () 一 样 ， 只 要 关键 字 不 同时 属于 RGB 和 HSL 成 分 ， 
scale() 可 以 接 有 党 任意 多 个 关键 字 。scale () 不 文 持 Shue， 因 为 色 环 是 一 个 圆 ， 衡 量 它 没有 什 
ADE 

253—478 RIBUBG K Emix(Scolor-1, $color-2, [$weight]) ". XA KZOE A 
各 个 成 分 的 平均 值 来 将 两 种 颜色 混合 到 一 起 。 另 外 , 你 还 可 以 有 选择 地 通过 $weight 人 参数 来 决定 
两 种 颜色 对 混合 颜色 的 分 别 影响 。$weight 越 接近 100%， 使 用 的 Scolor-1 越 多 ; sweight 越 接 
0%， 使 用 的 scolor-2 越 多 。 这 个 混合 色 还 受 两 个 颜色 的 透明 度 影响 ， 透 明度 越 小 的 颜色 对 绪 
颜色 的 影响 越 大 。 
































(D CSS 标准 指 出 HSL 颜 色 中 hue 成 分 的 单位 是 aeg。 这 个 单位 是 可 选 的 ， 因 此 在 通常 情况 下 会 被 省 略 。 
D 你 在 使 用 RBG 关 键 字 时 不 能 使 用 HSL 关 键 字 ; 除 此 限制 之 外 ， 你 可 以 使 用 任意 多 的 关键 字 。 
© sweight 周 围 的 方 插 号 表示 这 是 一 个 可 选 参 数 。 








9.3 ”函数 147 


set ($color) K% adjust () 和 scale() RAKU: 它 对 颜色 的 每 种 成 分 都 接受 一 个 关键 
字 。 但 是 它 的 行为 更 加 简单 ( 因此 有 用 程度 下 降 ): 它 将 这 些 成 分 设 定 为 一 个 新 值 ， 而 不 是 对 原 
有 成 分 的 值 进行 修改 。 因 此 set ($color，s$sred: 120) 会 将 scolor 的 红色 成 分 设置 为 120， 仅 
此 而 已 。 

最 后 ,我 们 还 要 提 及 一 些 非常 方便 的 颜色 困 数 。 如 果 没 有 这 些 印 数 , 我 们 也 可 以 实现 这 些 也 
数 的 功能 , 但 是 这 些 辆 数 使 得 这 些 功 能 变 得 更 为 简单 明了 。grayscale($scale) 将 $Scolor 的 饱 
和 度 设置 为 00%， 从 而 将 颜色 变 为 灰 度 。complement (scolor) 将 色 度 旋转 180 度 ， 从 而 使 得 色 轮 
HREH invert ($color) 翻转 变换 所 有 的 RGB 成 分 ， 从 而 返回 原色 的 反 相 版 本 。 

Sass 提 供 了 三 个 内 建 的 列表 卫 数 ， 我 们 会 在 接 下 来 一 一 讲解 。 
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通过 使 用 Sass 的 列表 因数 ， 你 可 以 对 列表 进行 任何 需要 的 操作 。 而 对 于 一 些 重复 的 操作 ， 更 
好 的 方法 是 定义 你 目 己 的 限 数 。 

最 有 用 的 列表 消 数 是 nth ($list，sn) ， 它 会 返回 列表 中 的 一 个 单独 项 目 〈 第 zx 个 )。 不 像 
JavaScript 等 编程 语言 ，Sass 列 表 中 的 项 目 从 1 开始 计数 。 因 此 ，nth (foo bar baz，2) 返 回 bar， 
nth(a b c，1) 返 回 a。 

join($1listi, $1ist2, [$separator]) 图 数 用 来 创建 新 的 列表 。 它 将 两 个 列表 连接 起 
来 。 由 于 单个 值 被 视 为 只 有 一 个 项 目的 列表 ， 这 个 吨 数 也 可 以 用 来 从 单个 项 目 创建 列表 。 可 选择 
的 sseparator 人 参数 用 来 决定 列表 的 类 型 ， 它 可 以 是 空格 或 者 逗号 。 如 果 没 有 指明 sseparator， 
那么 合并 后 的 列表 类 型 取决 于 $1ist1 的 类 型 。 

length ($list) 困 数 很 简单 。 它 返回 $1ist 列 表 中 项 目的 个 数 。 因 此 length(1 2 3) 为 3， 
length (foo) 为 1。 

Sass 中 同样 有 很 多 无 法 归 类 的 杂项 图 数 ， 它 们 对 于 编写 高 级 的 脚本 非常 有 用 。 

















9.3.4 其 他 Sass 函 数 


Sass 的 杂项 艺 数 大 多 用 来 编写 在 很 多 项 目 中 使 用 的 混合 带 。type-of ($value) 图 数 返 回 一 
个 无 引号 学 符 串 ,代表 问题 中 值 的 类 型 。 这 个 类 型 可 以 是 number、string、color、bool (对 
于 布尔 值 来 说 ) 或 者 1ist。 

if($condition, $if-true, $if-false) 根 据 一 个 布尔 值 在 两 个 值 之 间 进 行 选 择 。 如 有 果 
scondition 为 true, 那么 返回 sif-true, 否则 返回 $if-false。 和 布尔 操作 符 一 样 , 对 于 if() 
来 说 ,任何 的 非 布尔 值 都 被 视 为 Lrue。 

你 也 可 以 通过 使 用 efunction 指 令 定 义 自 己 的 Sass 函 数 。 




















9.3.5 用户 上 和 目 定 义 函 数 
当 你 在 很 多 上 下 文中 需要 进行 一 些 重 复 的 数值 计算 和 颜色 转换 时 ， 用 来 自 定 义 函 数 的 
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efunction 指 令 非 常 有 用 。 efunction 指 令 和 emixin 非 常 类 似 ， 不 同 之 处 在 于 afunction 包 含 
的 内 容 较 少 ， 每 个 afunction 必 须 返 回 一 个 结果 : 
Gfunction grid-width(S$cells) { 


Qreturn ($cell-width + $cell-padding) * $cells; 
} 


@Qreturn 指 令 是 @function 的 核心 。 它 和 JavaScript 中 的 return 很 像 : 接收 一 个 Sass 表 达 式 ， 
然后 将 表达 式 的 人 作为 函数 的 绪 末 返回 。 它 也 会 立刻 结束 函数 , 这 在 你 了 解 控 制 指令 之 后 会 十 分 
有 用 。 

在 一 个 也 数 内 部 添加 一 条 CSS 规 则 并 没有 什么 意义 , 添加 一 个 属性 也 没有 什么 意义 。 事 实 上 。 
一 个 @function 仪 仪 包含 几 样 内 容 : 首先 当然 是 &greturn, 还 有 一 些 变 量 声明 、 注 释 以 及 控制 指 
S (我 们 将 在 9.5 节 讲述 )。 


9.4 ”在 选择 器 和 属性 名 中 使 用 表达 式 


CSS 属 性 并 不 是 Sass 中 唯一 可 以 使 用 CSS 值 的 地 方 。 为 了 使 用 CSS 值 、 变 量 和 表达 式 Sass 
在 许多 额外 的 上 下 文 〈 如 选择 需 和 属性 名 ) 中 增加 了 一 项 特殊 的 语法 。 这 对 于 混合 需 来 说 非常 有 
用 ， 尤 其 是 那些 被 广泛 使 用 的 混合 右 ， 因 此 在 编写 混合 融 时 需要 尽 可 能 地 考虑 其 可 适用 性 。 

你 可 以 在 选择 需 和 属性 名 的 任何 地 方 将 一 个 表达 式 包 囊 在 #{ 和 } 之 间 ， 表 达 式 的 结果 将 会 在 
CSS 输 出 结果 中 代 共 #1{.. .}。 这 个 结果 将 会 像 属性 值 一 样 出 现 ， 不 过 有 引号 字符 串 的 引号 会 被 
移 除 。 这 种 做 法 叫 插值 。 

下 面 的 例子 利用 插值 创建 一 个 混合 融 ， 并 在 选择 融和 属性 名 中 使 用 其 参数 ， 如 代码 清单 9-2 
所 示 。 


代码 清单 9-2 ”使 用 最 终 值 蔡 换 表达 式 


@mixin thing ($class, $prop) { 
.thing.#{Sclass} ( 
prop-#{$prop}: val; 
} 
} 





























@include thing(foo, bar); 


#{S$Sclass} 补 foo 所 替换 ，#{S$prop} 被 bar 所 替换 ， 因 此 最 终 的 CSS 如 下 所 示 : 


.thing.foo { 
prop-bar: val; 


} 

除了 打包 一 些 样式 之 外 , 插值 还 能 使 混合 融 完 成 更 多 工作 。 例 如 ， 当 我 们 使 用 一 些 由 浏览 刀 
提供 的 最 新 CSS 特 性 时 ， 混合 右 可 以 用 来 移 除 生产 商 前 级 的 重复 编写 。 在 下 面 的 例子 中 ， 
experimental 混 合 器 使 用 插值 来 避免 为 最 新 CSS 性 质 逐 一 编写 浏览 需 前 缀 ， 如 代码 清单 9-3 
所 示 。 
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代码 清单 9-3 ”使 用 插值 来 添加 CSS 属 性 的 生产 商 前 组 


Qmixin experimental (Sproperty, S$value) ( 
-moz-#{$property}: $value; 
-webkit-#{$property}: $value; 
-ms-#{$property}: $value; 
K($Sproperty): $value; 

} 


尽管 对 于 特定 的 浏览 大 CSS hack 非 常 令 人 讨厌 ,然而 有 了 时候 它 们 也 是 很 必要 的 。 插值 也 会 很 
有 用 。 在 下 面 的 例子 中 ， 当 给 定 一 个 针对 于 IE6 的 值 时 ， 我 们 使 用 插值 来 避免 两 次 编写 属性 名 ， 
如 代码 清单 9-4 所 示 。 


代码 清单 9-4 (EHIME RK AR 53 CSSTU V as hack 


Qmixin bang-hack($property, $value, Sie6-value) { 
dt(Sproperty): $value !important; 
K($Sproperty): $ie6-value; 

} 


插值 也 可 以 用 在 表达 式 中 , 尽管 由 于 表达 式 本 映 已 经 允许 变量 和 其 他 表达 方式 的 使 用 , 插值 
在 其 中 的 用 处 并 不 是 很 大 。 但 是 它 确实 能 够 将 变量 插入 到 字符 串 以 及 类 字符 串 的 表达 式 〈 像 
calc () 或 者 正 浏览 帮 的 filter 语 法 ) 中 ， 如 代码 清单 9-5 所 示 。 


代码 清单 9-5 ”在 字符 串 中 插入 变量 


content: "This element is #{S$color}"; 

width: calc(10$ + £[($padding)]); 

filter: progid:DXImageTransform.Microsoft.Alpha( 
Opacity-tsí(S$opacity * 100} 























) ;7 
可 以 看 到 ,插值 在 编写 动态 样式 表 时 非常 有 用 。 它 可 能 并 不 是 你 每 天 都 会 用 到 的 技巧 但 绝 
对 是 你 震 要 了 解 擎 握 的 一 个 好 技巧 。 


9.5 控制 指令 


从 某 些 方面 来 说 ， 控 制 指令 是 Sass 脚 本 编写 中 的 最 高 级 技巧 。S$ass 中 的 大 部 分 内 容 都 基于 
CSS， 而 控制 指令 让 Sass 更 像 是 一 门 编程 语言 。 但 即使 你 是 一 个 完全 没有 编程 经 验 的 设计 师 ， 也 
不 要 被 “更 像 编 程 语 言 ” 这 样 的 说 法 吓 到 : 所 有 的 Sass 控 制 指 令 都 非常 直观 。 在 进行 设计 和 编写 
对 设计 有 帮助 的 混合 着 〈 这 是 必须 的 ， 否 则 它们 不 会 成 为 Sass 的 一 部 分 ) 方面 ， 它 们 非常 有 用 。 

控制 指令 是 一 种 特殊 类 型 的 指令 ， 它 控制 Sass 样 式 块 变 为 CSS 的 方式 。 控 制 指 令 亲 循 
@directivef{...}) 的 形式 ， 控 制 位 于 Sass 块 中 的 样式 。 每 种 指令 的 运行 方式 各 有 不 同 。 我 们 将 
在 本 节 中 查看 三 种 Sass 的 控制 指令 。 前 两 种 是 efor 和 eeach， 它 们 可 以 多 次 使 用 CSS 样 式 块 ， 
次 都 略 有 变化 ; @for 的 运行 次 数 由 指定 的 数字 决定 ,而 @each 则 会 迭代 列表 中 的 每 一 个 项 目 。 最 
后 一 种 是 aif， 它 控制 CSS 样 式 是 否 得 到 了 使 用 。 
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控制 指令 并 不 是 仅 仪 用 来 编写 样式 。 在 编写 复 森 的 混合 带 或 者 函数 时 , 在 控制 指令 中 仅 包含 
变量 赋值 可 能 会 很 有 帮助 。 控 制 指令 允许 你 使 用 @if 来 选择 变量 的 定义 ,或 者 使 用 @for 或 者 
@each 来 增强 一 个 值 。 

我 们 首先 来 介绍 efor 指 令 。 


9.5.1 ”对 数字 重复 样式 


@for 指 令 用 来 计数 , 每 数 一 个 数字 则 使 用 一 个 样式 块 。 它 有 两 种 相似 的 语法 : efor $i from 
1 to 5 {...} 以 及 @for $i from 1 through 5 {...}。 对 于 两 种 语法 ， 首 先 设 置 变量 Si 
为 1， 然 后 每 使 用 一 次 块 中 的 样式 就 增加 1。 两 种 语法 的 不 同 之 处 在 于 $i 停止 计数 的 位 置 : 对 于 1 
to 5， 它 停 在 4;， 而 对 于 1 througn 5， 它 停 在 5。 

下 面 的 样式 会 被 编 详 为 5 个 不 同 的 等 级 类 ， 每 一 个 类 都 有 一 张 不 同 的 背景 图 片 。 假 定 这 些 图 
片 包括 1 到 5 个 星 形 、 大 拇指 等 : 

@for $i from 1 through 5 { 

.rating-#{Ş$i} { 
background-image: url (/images/rating-#{$i}.png); 


} 
} 


你 不 一 定 要 使 用 1 和 5 作为 开始 和 结束 的 数字 。 你 也 可 以 使 用 -5 和 15 或 者 22 和 379。 你 其 至 可 
以 使 用 变量 ， 从 $a 数 到 $sp( 这 对 于 混合 右 和 用 户 自 定 义 孔 数 非常 有 用 )。 同 样 地 ， 你 可 以 依照 自 
己 的 喜好 对 计数 变量 ( 本 例 中 为 $i ) 命名 。 

@for 并 不 能 解决 所 有 的 问题 ， 它 不 能 向 下 计数 ， 不 能 隔 位 计数 ， 也 不 能 对 分 数 计数 。 但 是 
运用 一 点 小 技巧 , 你 可 以 通过 对 si 进行 一 些 数学 计算 来 模仿 这 些 计 数 方式 ， 如 代码 清单 9-6 所 示 。 
代码 清单 9-6 ”模仿 问 下 计数 或 陋 位 计数 

// 从 10 到 0 向 下 计数 


@for $i from 0 through 10 { 
Si: 10 — Si; 

















} 
// 从 0 到 20 隔 位 计数 
@for $i from 0 through 10 { 
Si: SI * 2; 
} 
尽管 计数 很 有 用 ， 但 是 你 经 稼 只 需要 针对 一 个 列表 中 的 每 一 个 值 编写 样式 。 针 对 这 种 情况 ， 
你 可 以 使 用 eeach 指 令 。 


9.5.2 ”对 列表 重复 样式 


像 efor 指 令 一 样 ，eeach 指 令 多 次 重复 一 个 样式 块 。 但 是 aeach 不 仅仅 是 计数 ， 而 是 对 一 个 
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列表 中 的 每 一 个 项 目 使 用 样式 块 。 它 的 语法 是 aeeach $item in foo, bar, baz (...). S 
依次 将 foo、bar 和 baz 的 值 赋 给 sitem 变 量 。 下 面 的 例子 就 是 使 用 eeach 指 令 对 一 个 网 站 的 每 个 
部 分 编写 链接 的 样式 : 
@each $section in home, about, archive, projects { 
nav .#{Ssection} { 
background-image: url(/images/nav/it(í$section)].png); 


} 
} 


Qeach 指 令 中 的 列表 可 以 用 空格 分 开 ， 也 可 以 用 逗号 分 开 ; 用 逗号 分 开 的 列表 更 易于 阅读 。 
它 也 可 以 是 一 个 变量 的 列表 , 甚至 可 以 是 一 个 包含 其 他 类 型 值 的 变量 ( 因为 非 列表 值 被 视 为 单元 


9.5.3 条件 样式 
@if 指 令 用 来 控制 一 个 样式 块 是 否 得 到 使 用 。 它 在 样式 表 日 常 编写 工作 中 的 使 用 次 数 可 能 没 


























提供 了 解决 办 法 。 

@if 指 令 的 语法 是 @if conditioní...], 其 中 的 condition 可 以 是 一 个 布尔 值 ， 一 个 于 有 
布尔 值 的 表达 式 〈 例 如 使 用 == 或 者 > 的 表达 式 )， 甚 至 一 个 市 有 其 他 值 的 表达 式 〈 因 为 这 些 值 被 
视 为 true )。 如 有 果 表 达 式 为 true， 那 么 这 个 样式 块 就 在 使 用 中 ， 否 则 ， 这 个 样式 块 就 被 忽略 了 。 
下 面 的 例子 使 用 eif 指 令 来 为 样式 添加 浏览 需 前 级 ， 前 提 是 已 经 设置 了 suse-browser-prefixes 
变量 ， 如 代码 清单 9-7 所 示 。 


代码 清单 9-7 使 用 eif 的 条 件 样式 


.rounded { 

Qif Suse-browser-prefixes { 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 

j 

border-radius: 5px; 


) 

你 也 可 以 有 选择 地 在 eif 块 之 后 包含 eelse 指 令 。 这 样 你 就 可 以 在 没有 使 用 第 一 个 样式 块 时 
使 用 另 一 个 样式 块 。eelse 指 令 可 以 拥有 目 己 的 条 件 ， 话 法 为 eelse if condition {...}, 
只 有 在 条 件 为 true 时 才 会 使 用 该 样式 块 ; 它 也 可 以 不 带 条 件 ， 在 这 种 情况 下 该 样式 块 总 是 会 被 
使 用 。 每 个 aif 指 今 可 以 配合 使 用 任意 数量 的 eelse if 指令 ， 但 是 只 可 以 配合 使 用 一 个 eelse 
指令 。 下 面 的 例子 使 用 了 一 个 aelse if 和 一 个 aelse 来 基于 alpha 通 道 值 调整 背景 色 ， 如 代码 清 
单 9-8 所 示 。 
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代码 清单 9-8 将 @i f 和 eelse 合 并 起 来 编写 高 级 样式 


Qif Salpha < 0,2 1 
background-color: black; 

) @else if S$alpha < 0.5 { 
background-color: gray; 

} Gelse { 
background-color: white; 


} 
上 面 的 例子 会 在 接收 $alpha 作 为 参数 的 混合 硕 中 出 现 ， 但 可 能 并 非 体现 为 任意 非 混 合 硕 


9.6 ”小结 


现在 你 已 经 了 解 了 Sass 的 所 有 功能 。 适 当地 使 用 这 些 工具 ， 可 以 创建 强大 的 、 可 重用 的 样式 
K, 它们 可 以 大 大 地 减轻 设计 时 的 工作 量 , 增加 设计 的 表达 性 。 你 甚至 可 以 编写 出 你 和 他 人 都 可 
以 使 用 的 跨 项 目 样 式 表 ， 以 此 改善 广阔 的 设计 界 。 

在 本 章 中 , 你 学 到 了 Sass 表 达 式 是 如 何 运行 的 , 包括 如 何在 表达 式 中 使 用 算术 操作 符 和 变量 。 
我 们 还 讲述 了 Sass 文 持 的 数据 类 型 及 其 操作 符 。 

我 们 接 痢 介绍 了 许多 由 Sass 提 供 ， 用 来 处 理 这 些 数据 类 型 的 有 用 孔 数 ， 以 及 如 何 编 写 自 定义 
哨 数 。 你 学 到 了 通过 插值 在 选择 右 和 属性 中 使 用 这 些 函 数 和 表达 式 的 结果 。 最 后 ,我们 谈论 了 如 
何 使 用 控制 指令 来 控制 样式 块 在 编译 的 CSS 中 的 使 用 方法 和 使 用 频率 。 

到 目前 为 止 ， 你 已 经 在 本 书 中 学 到 了 许多 关于 Sass 和 Compass 的 知识 ， 看 到 了 Sass 作 为 一 门 
富有 表现 性 的 动态 语言 所 展现 的 威力 ， 以 及 Compass 如 何 整 合 你 的 开发 和 生产 环境 并 提供 一 个 不 
可 思议 的 Sass 工 具 库 。 在 下 一 草 中 , 我 们 将 会 把 前 面 所 学 的 内 容 整 合 起 来 , 学 习 如 何 使 用 Compass 
扩展 来 创建 一 个 现代 的 样式 表 框 架 。 





























创建 并 分 享 一 个 Compass 扩 展 


本 章 内 容 

O 分 享 Sass 样 式 表 以 及 需要 Compass 扩 展 的 原因 
口 介绍 简单 的 Compass 扩 展 

口 详细 介绍 如 何 编写 一 个 高 级 扩展 

口 创建 模板 来 引导 或 演示 一 个 扩展 

口 简要 介绍 分 享 Compass 扩 展 的 不 同方 法 


到 日 前 为 止 ， 每 草 的 内 容 都 集中 在 帮助 你 掌握 Sass 和 Compass 的 不 同 特 性 ， 以 及 它们 如 何 通 
过 样式 表 来 提升 工作 效率 。 本 章 将 把 前 面 的 所 有 内 容 整 合 起 来 ， 基 于 你 所 学 到 的 Sass 和 Compass 
知识 来 帮助 你 迈 出 下 一 步 ， 并 且 建 立 一 个 Compass 框 架 。 我 们 将 探讨 在 社区 中 分 享 代 码 的 相关 问 
题 ， 并 详尽 介绍 如 何 编写 一 个 用 于 为 按钮 添加 CSS3 样 式 的 扩展 。 我 们 将 探索 创建 这 个 扩展 所 需 
的 设计 方案 ， 并 探讨 创造 真正 优秀 代码 的 原则 以 及 最 佳 方式 。 


10.1 ”分享 和 重用 样式 表 


如 果 你 有 过 编写 样式 表 的 经 历 , 那么 一 定 能 够 体会 看 到 一 些 巧 妙 的 CSS 代 码 最 终 汇 集 起 来 时 
的 那 种 恰 民 。 我 们 事先 你 存 样式 表 并 刷新 浏览 磊 ， 然 后 我 们 创造 的 东西 就 完美 地 出 现在 了 眼前 。 
成 功 了 ! 你 可 能 开始 准备 跳 起 胜利 的 舞蹈 了 。 但 是 下 一 步 应 该 做 些 什么 ? 

Sass 疼 于 表达 的 特性 可 以 让 我 们 的 样式 表 更 加 智能 。 和 使 用 原生 CSS 相 比 ， 我 们 需要 人 花 更 多 
的 时 间 来 探索 和 发 现 新 的 样式 表 。 同 时 ，Sass 和 Compass 也 使 得 我 们 比 过 去 更 加 容易 地 分 享 胜利 
和 顿悟 。 























10.1.1 SasstECSS S € 21 


在 过 去 ， 分 于 样式 表意 味 春 摊 写 一 篇 市 有 CSS 人 代码 户 段 和 可 供 下 载 代码 示例 的 博客 文章 。 这 
种 方式 的 结果 往往 是 ， 需 要 解决 的 问题 越 复 杂 , 博客 的 读者 就 越 难 正 确 地 使 用 。 有 心 的 作者 可 能 
会 在 文章 中 解释 如 何 适当 地 目 定 义 并 重用 样式 表 , 这 意味 着 那些 更 加 复杂 有 趣 的 样式 表 难 以 得 到 
分 译 ， 难 以 为 读者 所 使 用 。 男 外 ， 如 果 使 用 的 是 CSS 框 架 ， 任何 包 含 在 其 中 的 样式 表 都 会 自动 影 
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啊 网 站 的 样式 。 这 意味 着 用 户 必须 非常 谨慎 地 使 用 类 名 ， 或 者 必须 编辑 CSS 框 架 来 选择 并 挑 出 想 
要 的 部 分 。 

另 一 方面 ，Sass 的 用 户 可 以 分 享 非常 有 用 的 样式 表 ， 这 些 样式 表 不 需要 输出 CSS 代 码 。 一 个 
充满 着 混和 人 类 和 函数 的 样式 表 不 会 直接 对 一 个 网 站 的 样式 产生 影响 。 相 反 ，Sass 提 供 了 许多 工具 
来 帮助 设计 师 完 全 自主 地 进行 设计 。Sass 样 式 表 并 不 局 限于 选择 锅 、 属 性 以 及 属性 值 。 拥 有 变量 、 
eif、eelse、efor 、ewhile 以 及 自 定义 函数 和 混和 人 类 ，Sass 在 继承 了 CSS 的 基础 上 具备 更 强 的 
表现 力 。 

在 继承 之 外 ，CSS 框 架 的 一 个 致命 缺陷 在 于 没有 重用 的 概念 。 当 一 个 Sass 作 者 在 编写 emixin 
button-style(scolor) 时 ， 这 个 混入 类 定义 了 一 个 具有 特定 目的 的 代码 块 ， 每 当代 码 中 含有 
这 个 混和 类,， 它 都 向 读者 说 明 这 个 元 素 属 于 一 个 有 组 织 的 设计 框架 。 而 原生 的 CSS 则 无 法 做 到 这 
点 。CSS 代 码 块 无 法 被 重用 ， 只 能 被 复制 。 在 一 系列 样式 表 中 使 用 时 ，CSS 代 码 无 法 维持 它 的 完 
整 性 。 


表现 力 和 抽象 性 是 使 得 Sass 代 人 码 易于 解释 与 分 至 的 两 个 关键 特征 。 




















10.1.2 ”分享 Sass 


如 果 你 之 前 使 用 过 CSS 框 架 , 那么 一 定 熟 悉 在 开始 使 用 框架 时 必须 掌握 新 类 名 和 设计 模式 的 
痛 否 。 人 尽管 有 些 框架 有 更 好 的 文档 , 但 是 总 的 来 说 ， 如 果 你 不 想 要 框架 提供 的 东西 ， 就 需要 费劲 
心思 花 数 小 时 的 时 间 去 钴 人 研 框 架 的 代码 来 移 除 你 不 喜欢 的 部 分 , 同时 试图 保留 言 欢 的 部 分 。 这 实 
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尽管 你 可 以 像 过 去 的 CSS 框 架 一 样 将 最 喜欢 的 按钮 、 列 表 、 表 格 以 及 排版 设计 打包 起 来 ， 但 
是 Sass 将 会 引导 你 走 回 另 外 一 种 分 享 方式 。 使 用 Sass， 你 无 须 编写 一 种 特定 类 型 的 按钮 样式 ， 而 
是 将 样式 封装 到 一 个 混入 类 内 部 。 将 你 的 样式 打包 成 一 系列 混入 类 是 分 至 样式 表 框 染 的 好 办 法 ， 
可 以 帮助 用 户 保持 对 其 网 站 设计 的 全 权 欣 制 。 另 外 ,你 也 可 以 编写 接收 一 系列 变量 的 混和 类, 这 
样 可 以 让 用 户 在 使 用 你 的 框架 时 自 定义 属性 。 

Sass 子 数 也 是 一 个 非常 好 的 资源 。 如 果 你 的 框 染 提供 可 目 定 义 的 配色 方 采 ,保证 最 终结 果 的 
质量 将 是 一 大 挑战 。 例如， 如 果 用 户 可 以 为 一 个 按钮 选择 一 种 背景 色 ， 按钮 上 的 文本 仍然 应 该 易 
于 阅读 。 下 面 列 出 的 一 段 Sass 代 码 将 帮助 你 解决 这 个 问题 。 它 使 用 Sass 中 内 建 的 颜色 因数 大 你 挑 
选 一 种 与 育 景 色相 桂 并 且 对 比 度 更 高 的 文本 颜色 。 下 面 的 代码 位 于 本 和 曹 代码 示例 的 
color-helper.scss 文 件 中 ， 如 代码 清单 10-1 所 示 。 


代码 清单 10-1 E RE BEI PROS ERA 


// 如 果 闫 色 的 明度 高 于 50% 则 返回 true 
@Qfunction is-bright (Scolor) { 
@return (lightness ($color) > 50%); 















































} 


// 如 果 亮 则 返回 Slight 值 ， 瞳 则 返回 Sdark 值 
Gfunction if-bright(Sbg, Slight: true, Sdark: false) { 
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@return if(is-bright (Sbg), Slight, Sdark); 
} 


// 选取 对 比 度 最 高 的 颜色 

Gfunction text-contrast(S$bg, S$dark-text: #000, Slight-text: #fff) ( 
Qreturn if-bright(S$bg, S$dark-text, S$Slight-text); 

} 


上 面 的 例子 非常 好 地 说 明了 Sass 如 何 解决 在 Web 设 计 中 遇 到 的 一 系列 问题 ， 从 而 改变 设计 师 
和 开发 者 使 用 样式 表 所 能 做 的 事 。 你 在 这 里 可 以 看 到 分 享 Sass 和 分 享 CSS 之 间 的 不 同 之 处 。 你 也 
能 从 中 了 解 到 ， 当 样式 表 作 者 在 分 享 和 重用 工具 而 不 是 具体 的 实现 方式 时 , 编写 样式 表 最 终 如 何 
参与 到 了 Web 开 发 的 世界 中 。 但 是 简单 地 将 一 个 Sass 文 件 或 者 代码 片段 发 布 到 网 络 上 是 远 远 不 够 
的 。 使 用 Compass 扩 展 ， 你 可 以 做 得 更 好 。 











10.1.3 分享 Sass 是 远 远 不 够 的 


可 以 看 到 ，Sass 比 CSS 更 容易 分 译 ， 但 是 当 你 拥有 一 段 想 要 分 享 的 Sass 代 人 码 片 段 时 ， 最 好 的 
分 人 享 方式 是 什么 呢 ?” 你 可 以 将 它 发 布 到 博客 上 ， 其 至 可 以 将 它 作 为 一 个 迭代 的 样 例 发 布 在 
CodePen ( http://codepen.io ) 上 。 其 他 人 可 以 简单 地 将 你 的 代码 复制 到 他 们 的 项 目 中 ， 并 开始 孚 
受 你 的 劳动 成 采 。 但 是 如 采 你 想 要 分 至 的 不 仪 仪 是 一 个 代码 片段 怎么 办 ? 

如 果 你 想 要 在 分 享 Sass 代 码 的 同时 分 享 一 些 其 他 的 资源 ， 例 如 图 片 、 字 体 、JavaScript 或 者 
HTML, 应 该 怎么 办 ?这 就 要 求 用 户 将 这 些 文件 移动 到 合适 的 位 置 以 便 将 你 的 成 果 整 合 到 他 们 的 
项 目 中 。 你 分 享 的 内 容 越 精 细 ， 用 户 就 要 花费 更 多 的 精力 才能 开始 使 用 你 分 享 的 内 容 。 


10.1.4 为 什么 使 用 Compass 扩 展 


Compass 扩 展 是 分 至 Sass 脚 本 ( 以 及 相关 联 的 资源 ) 的 一 种 绝 好 方式 ， 使 他 人 能 轻松 地 使 用 
你 的 成 果 。Compass 扩 展 同 时 也 为 个 人 或 者 企业 级 别 的 框架 提供 了 一 个 非常 好 的 构建 代码 块 。 你 
应 该 编写 真正 的 Compass 扩 展 ， 而 不 是 将 Sass 代 人 码 块 从 一 个 项 日 复制 到 男 一 个 项 目 。 

当 有 人 安装 了 你 的 Compass 扩 展 , 你 可 以 肯定 他 们 可 以 使 用 由 Compass 提 供 的 相同 混入 类 库 、 
为 数 库 以 及 其 他 特性 的 库 。 这 使 我 们 可 以 轻松 地 依靠 Compass 包 含 的 库 来 创建 扩展 。 如 果 你 想 要 
使 用 精灵 图 或 者 CSS3 , 你 可 以 充满 自信 地 使 用 Compass 中 的 工具 ,无需 担 心 会 增加 扩展 的 复杂 性 。 

Compass 打 展 可 以 包含 多 个 项 目 模板 来 向 用 户 展 示 其 不 同 特性 ， 并 为 用 户 提 供 一 个 使 用 示例 
代码 的 起 点 。 根 据 配 置 文件 ，Compass 知 道 资 源 位 于 什么 位 置 ， 因 此 你 的 模板 可 以 人 简单 地 在 正确 
的 地 方 安 北 样 式 表 、 图 片 或 者 JavaScript。 

上 面 所 讲 的 内 容 也 许 会 让 你 觉得 创建 一 个 Compass 扩 展 好 像 要 花 很 多 功夫 ,但 是 不 要 害怕 。 
创建 你 上 自己 的 Compass 扩 展 其 实 很 简单 。 


10.2 一 个 简单 的 扩展 
在 下 面 这 个 例子 中 ， 我 们 将 使 用 前 面 的 颜色 函数 并 将 它们 打包 成 一 个 名 为 color-helpers 的 简 0 — 
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蛙 扩 展 。 如 来 你 现在 就 想 看 一 看 最 终结 果 ， 可 以 在 本 董 的 代码 示例 中 找到 这 个 简单 的 扩展 。 Hox 
结构 如 代码 清单 10-2 所 示 。 


代码 清单 10-2 最 简单 的 扩展 


color-helpers/ 
stylesheets/ 
color-helpers.scss 


它 是 一 个 以 colorhelpers 扩 展 命 名 的 目录 ， 其 中 包含 一 个 stylesheets 目 录 和 一 个 Sass 文 件 ， 这 
个 Sass 文 件 同样 以 你 的 扩展 命名 。 这 就 是 一 个 最 基本 形式 的 扩展 。 你 可 以 将 它 作 为 一 个 Github 项 
目 分 享 ， 或 者 将 它 压缩 为 zip 文 件 上 传 到 你 的 网 站 。 这 样 的 形式 一 般 被 称 为 adhoc 扩 展 。 你 也 可 以 
将 扩展 以 Ruby gem 的 形式 发 布 , 这 让 用 户 可 以 使 用 命令 行 下 载 、 安 装 并 升级 你 的 扩展 。 我 们 将 在 
稍 后 探讨 这 种 方式 。 





10.2.1 安装 ad hoc 扩 展 


要 安装 这 种 类 型 的 扩展 ,Compass 用 户 应 该 将 color-helpers 目 录 复制 到 项 目的 extensions 文 件 夹 
中 。 在 扩展 被 放置 到 适当 的 位 置 之 后 ， 这 个 扩展 的 Sass 文 件 便 可 以 被 引入 ,好像 它们 就 位 于 这 个 
项 目的 sass 目 录 中 一 样 。 

对 于 一 个 独立 的 项 目 , 扩展 应 该 放置 在 位 于 项 目 根 目录 下 的 extensions 目 录 中 , 例如 project_root/ 
extensions/color-helpers/。 在 Rails 项 目 中 ，ad hoc E M 1 X x 2k FI] vendor/plugins/compass - 
extensions 目 录 中 。Compass 在 默认 情况 下 不 会 目 动 创建 这 些 目录 ,因此 扩展 作者 需要 手动 添加 这 
些 目录 。 


10.2.2 ”测试 你 的 扩展 

为 了 试用 你 的 新 扩展 , 你 需要 创建 一 个 新 的 Compass 项 目 并 安装 color-helpers 扩 展 。 你 可 以 将 
下 面 的 指示 输入 终端 ， 也 可 以 在 本 草 代 人 码 示 例 中 查看 test-color-helpers 目 录 : 

compass create test-color-helpers --bare 


现在 你 需要 添加 一 个 sass/screen.scss 文 件 并 创建 extensions 目 录 。 将 color-helpers 扩 展 复制 到 
extensions 目 录 中 ， 这 时 你 的 项 目 应 该 如 图 10-1 所 示 。 

















eoo (.] test-color-helpers 
Name 
rb config.rb 
Y Dy extensions 
Y [| color-helpers 
Y |..] stylesheets 
color-helpers.scss 
v lj sass 


screen. scss 


图 10-1 color-helpersJii H ix Æ 
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现在 你 需要 添加 eimport "color-helpers" ;到 screen.scss 文 件 中 ,然后 你 就 可 以 开始 在 项 
H P fie Hep e PRAE. 在 代码 示例 中 ， 你 将 看 到 几 个 使 用 color-contrast 了 水 数 的 例子 。 不 
可 和 否认, 它 确 实 不 是 一 个 让 人 兴 香 的 扩展 。 两 个 颜色 函数 不 会 为 你 提供 太 大 的 帮助 。 正 如 前 面 提 
到 的 ， 扩 展 有 时 不 仅仅 是 样式 表 ， 那 就 让 我 们 来 做 一 些 更 有 趣 的 事情 : CSS3 按 钮 | 











10.3 创建 扩展 演示 项 目 


正如 你 所 看 到 的 ， 扩 展 并 不 是 一 个 形式 完全 的 Compass 项 目 ， 而 是 一 个 用 于 Compass 项 目的 
文件 库 。 开 发 扩展 的 最 好 方式 就 是 创建 一 个 Compass 演 示 项 目 。 稍 后 , 我 们 将 创建 一 个 高 级 扩展 ， 
但 是 我 们 首先 需要 设置 一 个 演示 项 目 。 

演示 项 目 有 两 个 作用 : 第 一 ， 它 将 帮助 你 开发 并 测试 扩展 ; 第 二 ， 在 你 完成 开发 之 后 ， 可 以 
使 用 这 个 演示 作为 扩展 的 项 目 模 板 。 用 户 可 以 轻松 地 将 这 个 演示 安装 到 目 己 的 Compass 项 目 中 ， 
这 样 可 以 使 用 户 快捷 地 尝试 你 的 扩展 。 

我 们 这 个 扩展 的 目标 是 帮助 用 户 轻松 地 和 后 成 漂亮 的 CSS3 按 钮 。 我 们 把 这 个 扩展 叫做 
nice-buttons， 有 谁 会 不 喜欢 深 亮 的 按钮 呢 ? 演示 项 目的 目录 绪 构 如 图 10-2 所 示 。 





























eoo ( ] test-nice-buttons 
Name 
rb config.rb 
* demo.html 
Y { extensions 
Y |.j nice-buttons 
Y |..] stylesheets 
nice-buttons.scss 
v IJ sass 
demo.scss 





[X|10-2 nice-buttons 演 示 项 目 设 置 


和 前 面 提 到 的 color-helpers 扩 展 一 样 ,你 拥有 一 个 基本 的 Compass 项 目 , 它 包 含 一 个 以 你 的 扩 
展 命名 的 扩展 目录 ， 其 中 有 一 个 stylesheets 上 目录， 该 目录 中 包含 一 个 以 你 的 扩展 命名 的 Sass 文 件 。 
这 里 唯一 的 区 别 是 , 你 拥有 一 个 demo.html 文 件 , 用 于 在 训 览 大 中 预览 样式 。 这 个 演示 HTML 不 需 
要 很 花哨 。 你 只 需要 在 其 中 放置 一 个 按钮 和 一 个 扩展 的 链接 即 可 ， 如 代码 清单 10-3 所 示 。 




















代码 清单 10-3 ”demo.html 文 件 


<!DOCTYPE html» 
«html» 
«head» 
«title»Nice Buttons - Demo</title> 
«link href-"stylesheets/demo.css" rel="stylesheet" 
type="text/css"> 


</head> 
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<body> 
«hi»Button Test</h1> 
<button>Click Me!</button> 
«a class="button" href="#">Click Me!</a> 


</body> 
«/html» 


你 可 能 会 感到 奇怪 ， 为 什么 我 们 使 用 <button>Launch</button> 而 不 是 <input type= 
"button" value="Launch">。 在 过 去 ，input 按 钮 很 难 在 不 同 浏 览 融 和 操作 系统 中 保持 同样 的 
样式 。 在 这 一 点 上 ， 现 代 浏 览 右 更 加 容易 使 用 ， 但 是 HIML 4.01 标 准 ( http://www.w3.org/TR/ 
html401/interact/forms.html#h-17.5 ) 指出 ,创建 <bputton> 元 素 是 为 了 提供 更 富 演 染 的 可 能 性 。 于 
是 ， 当 我 们 想 要 在 操作 系统 或 者 浏览 需 中 使 用 默认 样式 时 ,我们 倾 回 于 使 用 input 按 钮 。 当 我 们 想 
要 编写 一 些 目 定义 样式 时 ， 可 以 依靠 <button> 元 系 来 保持 一 致 性 。 

接 下 来 ， 你 需要 在 demo.scss 中 引入 nice-buttons 扩 展 并 添加 一 段 Sass 代 码 ， 如 代码 清单 10-4 
所 示 。 


代码 清单 10-4 ”demo.scss 文 件 























@import 'nice-buttons'; 
html. 1 
font-family: Helvetica, Arial, sans; 
background: #f4f4f4; 
} 
body { 
text-align: center; 
position: absolute; 
top: 30px; left: 30px; bottom: 30px; right: 30px; 
padding-top: 20px; 
background: #fff; 
border: 1px solid #e5e5e5; 


} 
由 于 你 还 没有 为 按钮 和 链接 编写 样式 ， 图 10-3 所 展示 的 就 是 demo.scss 编 译 后 的 显示 结果 。 


eoo Nice Buttons - Test w^ 


Button Test 


Click Me! | Click Me! 


编写 样式 前 





[€|10-3 ”nice-buttons 演 示 








现在 你 的 演示 项 目 已 经 设置 完毕 ， 可 以 开始 编写 扩展 了。 
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10.4 ”编写 高 级 扩展 


在 我 们 进入 有 趣 的 CSS3 部 分 之 前 ， 先 来 编写 一 些 简 单 的 按钮 重 置 样式 是 一 个 不 错 的 想法 。 
根据 操作 系统 和 浏 贤 带 的 不 同 , 按 钮 有 不 同 的 默认 样式 ,由 于 链接 常常 和 按钮 显示 为 同样 的 样式 ， 
你 要 确保 两 者 在 不 同 的 浏览 右 和 操作 系统 中 都 保持 一 致 的 样式 。 因 此 ， 你 需要 在 nice-buttons.sess 
文件 中 添加 nice-button 混 人 和 人 类， 如 代码 清单 10-$ 所 示 。 














代码 清单 10-5 ”nice-buttons.scss 文 件 


Qimport "compass/css3"; 


Qmixin nice-button() ( 
// €ER XA 
font: normal 16px/18px "Lucida Grande", Lucida, Arial, sans-serif; 


margin: 0; 

text-decoration: none; 

cursor: pointer; 

padding: .5em 1.2em; 

Qinclude border-radius(.3em); 
&:active, &:hover { outline: none ) 


/ 普通 样式 
background-color: #eee; 
border: #bbb 1px solid; 
color: #333; 

} 


由 于 Ch A A ， 你 需要 确保 在 文件 的 项 部 引入 Compass 的 CSS3 模 块 。 
如 果 用 户 已 经 引入 了 CSS3 模 块 ， 这 个 引入 语句 将 会 被 忽略 。 现在 你 只 需 将 这 个 混和 人 类 添加 到 
demo.scss 文 件 中 : 


button, .button { @include nice-button } 


现在 再 次 打开 浏览 各 ， 浏 览 磊 显示 的 内 容 说 明 你 已 经 走 上 了 正轨 (图 10-4 )。 


eoo Nice Buttons - Test w^ 








Button Test 


Click Me! Click Me! 


图 10-4 样式 相同 的 按钮 





160 第 10 章 ”创建 并 分 享 一 个 Compass 扩展 





按钮 和 链接 现在 看 起 来 完全 一 样 了 ,但 是 远 远 谈 不 上 深 吝 。 你 需要 继续 修改 。 





10.4.1 ”自动 化 完成 困难 的 部 分 


你 已 经 完成 了 基础 工作 , 现在 是 时 候 来 编写 这 个 扩展 的 精华 部 分 了 。 你 想 让 用 户 可 以 通过 简 
单 地 把 想 要 的 颜色 告诉 混入 类 来 创建 一 个 漂亮 的 按钮 。 为 了 自动 化 完成 其 中 的 一 些 样式 , 你 需要 
依赖 Sass 中 聪明 的 颜色 转换 函数 以 及 本 草 前 面 的 两 个 颜色 羡 数 。 

我 们 继续 在 extensions/nice-buttons/stylesheets/ 中 创建 _color-helpers.scss 文 件 , 在 其 中 添加 三 个 
BRE, JEHjeimport "color-helpers"; 在 nice-buttons.scss 的 顶部 加 入 该 文件 。 接 下 来 ， 
你 需要 修改 混和 类 来 接 有 党 一 个 背景 色 并 挑选 相关 颜色 ， 如 代码 清单 10-6 所 示 。 











代码 清单 10-6  nice-buttons.scss 


Qmixin nice-button(Sbg: #eee) { 


/] 普通 样式 
background-color: Sbg; 
color: text-contrast ($bg, Sdark-text: mix($bg, #000, 252)); 
border: scale-color($bg, S$lightness: -20%) lpx solid; 
} 
现在 ， 这 个 混入 类 让 用 户 设 置 一 个 背景 色 ( 如 果 用 户 不 传递 任何 值 则 默认 为 #eee )， 然 后 ， 
通过 使 用 kext-contrast 困 数 挑选 一 个 和 背景 色相 衬 的 文本 颜色 。 将 深 色 文本 和 彰 景色 稍 加 混 
合 ， 以 便 文本 与 按钮 的 其 他 部 分 更 好 地 融合 。 最 终 ， 通 过 加 深 背 景色 来 选取 边框 颜色 。 人 快速 更 新 


demo.scss 文 件 ， 如 代码 清单 10-7 所 示 。 














代码 清单 10-7 — demo.scss 


button { eincludqe nice-button ) // 默 认 的 混入 类 背景 
.button { Ginclude nice-button(4494e57) ) // 深 蓝 灰 色 


图 10-5 展 示 了 你 的 进展 。 


Button Test 


Click Me! Click Me! 


图 10-5 ”开始 日 动 化 颜色 选择 
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这 些 颜 色 函 数 在 简化 方面 做 的 不 错 ， 但 是 按钮 震 要 一 些 渐变 。 为 了 使 这 个 混 人 类 保持 简单 ， 
我 们 在 一 个 为 外 的 “ 文 持 ”混入 类 中 生成 渐变 ， 如 代码 清单 10-8 所 示 。 


代码 清单 10-8 nb-gradient 











nice-buttons.scss 


Qmixin nb-gradient(S$bg) { 
// 测量 挑选 的 主要 颜色 


Stop: scale-color($bg, $lightness: 402); 
$middle-1: scale-color($bg, Slightness: 10%); 
$middle-2: scale-color($bg, Slightness: -5$); 
Sbottom: scale-color($bg, S$lightness: -20$); 


Qinclude background-image(linear-gradient( 
$top, $middle-1 50$, $middle-2 50$, S$bottom)); 
} 


有 了 这 些 变 量 ， 你 可 以 创建 一 个 市 有 项 部 反光 、 底 部 阴影 以 及 模糊 中 线 的 深 亮 渐变 ， 这 使 得 
按钮 拥有 了 三 维 立 体 的 观感 。 当 创建 诸如 np-gradient 这 样 的 支持 混入 类 时 ， 最 好 将 它们 归 入 
以 扩展 首 字 母 命名 的 命名 空间 中 。 这样 可 以 使 混入 类 名 称 保持 简短 ,同时 也 告诉 那些 阅读 源码 的 
A: 这 是 一 个 内 部 混入 类 ， 你 可 能 不 会 使 用 到 它 。 将 @include nb-gradient (S$bg) 添加 到 
nice-button 混 入 类 中 ， 你 可 以 得 到 如 图 10-6 所 示 的 结 


eoo Nice Buttons - Test e 








Button Test 


Click Me! | Click Me! 


图 10-6 ”初始 渐变 样式 


深 色 按钮 看 起 来 不 错 , 但 是 浅 色 按钮 的 渐变 看 起 来 对 比 度 有 些 高 。 为 了 解决 这 个 问题 ,我 们 
将 区 别 对 等 浅 色 和 深 色 背景 ， 如 代码 清单 10-9 所 示 。 


代码 清单 10-9 nb-gradient 混 入 类 中 的 颜色 赋值 


// 测量 挑选 的 主要 颜色 


Stop: scale-color($bg, S$lightness: if-bright($bg, 80$, 40%)) 
$middle-1: scale-color($bg, Slightness: if-bright($bg, 20$, 10%)) 
$middle-2: scale-color($bg, Slightness: if-bright($bg, -2$, -5%)) 

( 02 


Sbottom: scale-color(S$bg, S$Slightness: if-bright(S$bg, -10$, -2 


现在 你 的 渐变 混和 人 类 可 以 通过 调节 颜色 转变 来 改进 最 终 的 渐变 了 。if-pbright 困 数 将 碍 看 
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sbg 变 量 : 如 果 sbg 亮 度 高 于 $0% 则 使 用 第 一 个 百分比 ， 否 则 使 用 第 二 个 百分比 。 这 样 的 方式 比 
分 别 编写 浅 色 和 深 色 的 渐变 代码 要 简单 得 多 。 虽 然 它 只 是 在 百分比 上 做 了 微小 的 调整 , 但 是 最 终 
效果 却 有 显著 的 提升 (图 10-7 )。 


eoo Nice Buttons - Test e 


Button Test 


Click Me! Click Me! 





图 10-7 调 市 颜色 转变 后 的 改进 情况 


修改 前 后 的 差别 并 不 大 , 但 是 这 种 程度 的 修改 却 能 帮助 你 创建 一 个 优秀 的 扩展 。 当 你 添加 文 
本 阴影 和 盒 阴 影 时 ， 也 可 以 采用 同样 的 方法 来 操纵 颜色 ， 如 代码 清单 10-10 所 示 。 





代码 清单 10-10 | text-shadow- ——nice.buttons.scss 


text-shadow: Scale-color(S$bg，S11ghtness : 
if-bright(Sbq, 259, -25%)) 0 lpx 1px; 

Qinclude box-shadow (rgba(#fff, 
1if-bright ($bg, .6, .2)) 0 0 1px 1px inset); 


XI TOCEBHSZ, if-bright AZORE G1 PILOTS BAR o STET ARS. 它 选 择 正确 的 透 
明度 。 你 可 以 看 到 这 个 简单 的 目 动 化 操作 有 多 么 强大 。 图 10-8 展 示 了 你 到 目前 为 止 的 成 末 。 


= 


eoo Nice Buttons - Test e 








Button Test 


Click Me! | Click Me! | 





10-8 JllDAtext-shadowJfBitAbox-shadow 


现在 让 我 们 来 改善 现 有 的 结果 并 添加 一 些 交 互 式样 式 和 一 个 漂亮 的 CSS3 过 渡 。 
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编写 按钮 在 聚焦 、 悬 浮 和 激活 状态 的 样式 时 ， 普 所 的 做 法 是 减 淡 、 加 次 颜色 和 请 加 阴影 。 编 
写 这 种 效果 的 方式 有 很 多 种 , 但 是 由 于 你 已 经 开始 依赖 CSS3 , 你 应 该 考虑 最 终生 成 的 CSS 文 件 大 
小 。 在 本 书 出 版 时 ， 你 依然 需要 使 用 CSS3 的 厂商 前 级 ,虽然 Compass 会 为 你 处 理 好 这 件 事 , 但 是 
最 终 输 出 的 文件 体积 会 很 大 。 为 悬浮 或 激活 状态 生成 一 个 新 的 亮度 或 者 灰 度 渐变 要 在 输出 中 添加 
很 多 CSS 语 句 。 如 果 人 们 使 用 这 个 扩展 来 为 许多 不 同 的 按钮 添加 样式 ， 影 响 将 是 很 显 着 的 。 

为 了 在 添加 这 些 互动 样式 的 同时 保持 输出 的 精简 ,你 需要 使 用 一 个 聪明 的 技巧 。 当 你 的 文件 
中 包含 nb-gradient 混 入 类 时 ， 你 需要 使 用 一 个 部 分 透明 色 。 这 香味 着 按钮 的 背景 色 会 透 过 渐 
变 显 示 出 来 。 现 在 你 可 以 改变 渐变 后 面 的 痛 景 色 ， 修改 效果 将 会 通过 淘 变 显现 出 来 。 下 面 是 到 目 
前 为 止 的 主要 按钮 样式 ， 如 代码 清单 10-11 所 示 。 


代码 清单 10-11 _ nice-pbutton 混 和 人 类 中 的 一 般 按钮 样式 


// 普通 样式 

background-color: S$bg; 

border: scale-color($bg, $lightness: -20%) 1px solid; 
color: text-contrast(S$bg); 






































nice-buttons.scss 


QGinclude nb-gradient(rgba($bg, .7)); // alphaG€-iui 
Qinclude transition(background-color,box-shadow .15s); 
text-shadow: scale-color(S$bg, S$lightness: 
if-bright($bg,25$,-252)) 0 1px 1px; 
Qinclude box-shadow (rgba(#fff, 
if-bright ($bg,.6,.2)) 0 0 1px 1px inset); 


现在 我 们 来 添加 按钮 状态 样式 ， 如 代码 清单 10-12 所 示 。 


代码 清单 10-12 ”添加 :hover 和 :focus 的 样式 
// 状态 样式 


&:hover, &:focus { 
background-color: scale-color($bg, 
Slightness: if-bright($bg, 85$, 25%) 
) ;7 
} 





nice-buttons.scss 


&:active ( 
background: scale-color($bg, 
Slightness: if-bright(S$bg, 55$, 15%) 
) ;7 
border-color: rgba(*000, if-bright(S$bg, .4, .8)); 
Qinclude box-shadow( 
if-bright(S$bg, 
rgba(mix($bg, 4000, 25$), .4), 
rgba(mix($bg, 4000), .9) 
) 0 2px 12px inset 
) ;7 
} 


基本 上 来 说 , 你 只 是 在 按钮 被 按 下 时 调整 了 背景 色 并 添加 了 一 个 深度 舱 入 的 盒 阴 影 。 在 激活 
状态 下 ， 你 并 没有 设置 background-color， 而 是 设置 『 了 -background 属性 , 移 除 渐变 背景 图 片 
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使 按钮 只 剩 下 缘 景 色 和 一 个 杏 入 盒 明 影 ， 以 此 创建 了 一 个 阴暗 的 效果 。 图 10-9 逐 一 展示 了 三 种 状 


eoo Nice Buttons - Test "à 


Button Test 


Click Me! Click Me! 










Click Me! MESI 





nice-buttons.scss 


图 10-9 互动 按钮 状态 


你 可 能 很 难 通 过 视图 感知 到 点 击 按钮 的 感 党 , 因此 务必 要 查看 示例 代码 的 演示 。 为 这 个 扩展 
编写 样式 的 部 分 已 经 结束 了 ， 但 是 还 可 以 做 一 些 重 构 。 


10.4.2 重 构 你 的 扩展 


现在 ,扩展 的 主要 混和 类 nice-buttons 由 三 个 不 同 部 分 组 成 : 

(1) 重 置 样式 ; 

(2) 普通 按钮 样式 ; 

(3) 按钮 状态 样式 。 

重 置 样式 对 于 每 个 按钮 都 相同 ， 每 个 按钮 都 使 用 相同 的 CSS3 过 滤 。 因 此 只 要 某 文 件 包 含 了 
nice-button 混 人类, 就 相当 于 复制 了 八 行 Sass 代 码 。 现 在 你 还 需要 为 厂商 前 级 添加 额外 生成 的 
CSS， 这 是 你 现在 需要 解决 的 问题 。 

这 是 使 用 eextenq 的 最 佳 场合 。 你 可 以 将 这 些 样式 添加 到 一 个 基本 类 , 然后 每 一 个 按钮 按照 
如 下 方式 扩展 样式 : 


.button-reset { 


// 重 置 样式 








} 
@mixin nice-button { 
QGextend .button-reset; 


~ 
[Heo BA EREE 
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在 这 种 情况 下 ， 编 写 一 个 扩展 和 为 你 目 己 的 项 目 编写 相同 的 样式 存在 不 同 之 处 。 即 
使 .button-reset 可 能 是 安全 的 类 名 ,但 是 这 违反 了 扩展 设计 的 一 个 关键 原则 : 除非 有 要 求 ， 
否则 扩展 不 应 该 输出 任何 CSS 人 代码。 扩展 中 的 样式 应 该 尽 可 能 地 存在 于 混入 类 中 ， 否 则 ， 你 知 要 
假设 用 户 会 使 用 哪些 元 素 或 类 名 ,引入 扩展 中 的 样式 表 可 能 导致 用 户 设计 中 的 元 素 自动 继承 你 的 

你 可 以 通过 将 重 置 样式 放 在 一 个 混入 类 中 来 达到 同样 的 效果 , 然后 将 重 置 混入 类 包含 在 一 个 
HITER P: 


@mixin nice-button-reset() { 


// 重 置 样式 
} 


$nice-button-reset { @include nice-button-reset; } 

正如 你 在 第 2 章 中 看 到 的 ， 如 果 扣 位 符 从 未 得 到 过 扩展 ， 其 中 的 样式 就 不 会 被 编 详 为 CSS 。 
这 对 于 扩展 作者 来 说 是 一 件 好 事 , 因为 它 让 你 的 扩展 圣 受 选择 带 占 位 从 继承 市 来 的 好 处 ,而 无 逢 
生成 任何 不 必要 的 样式 或 者 类 名 。 

为 什么 我 们 使 用 一 个 重 置 混入 类 , 而 不 是 仅 在 占 位 符 下 面 编写 样式 ?因为 一 个 储存 了 重 置 样 
陈 的 混和 类 可 以 在 任何 地 方 重 用 。 也 许 在 菏 个 人 的 项 目 中 ， 其 样式 有 可 能 重 载 了 你 的 重 置 样式 。 
使 用 一 个 混入 类 ， 可 以 轻易 地 将 其 包含 进 样式 中 来 防止 层 芋 。 

运用 这 条 原则 ， 扩 展 的 结构 概要 如 代码 清单 10-13 所 示 。 


代码 清单 10-13 P 
@mixin nb-reset() { 
// 重 置 样式 
} 


$nb-reset { Ginclude nb-reset } 


















































Qmixin nb-gradient(S$bg) { 
// 渐变 样式 
} 


@mixin nice-button($bg: #eee) { 
Qextend $nb-reset 
// 普通 样式 
// 按钮 状态 样式 
} 
将 所 有 的 重复 移 除 之 后 ， 你 的 扩展 看 起 来 苗条 多 了 。 它 能 生成 漂亮 的 按钮 和 CSS。 我 们 现在 
来 看 一 看 构成 扩展 的 全 部 62 行 Sass 代 码 ， 如 代码 清单 10-14 所 示 。 


代码 清单 10-14 扩展 目录 模式 


Qimport "compass/css3"; 
Qimport "color-helpers"; 








// 按钮 样式 重 置 和 基本 样式 


Qmixin nb-reset() { 





E 
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font: normal 16px "Lucida Grande", Lucida, Arial, sans-serif; 


margin: 0; 
text-decoration: none; 
margin-bottom: .3em; 
pointer; 
.bem 1.2em; 
inline-block; 
( width: 


Cursor: 
padding: 
display: 
border: 


lpx; style: 


QGi1nclude border-radius(.3em); 


&:active, &:hover { outline: 


Qinclude transition(background-color,box-shadow .15s); 
} 
$nb-reset { @include nb-reset; j 
// 使 用 简单 的 色 移 来 自动 选取 渐变 
Qmixin nb-gradient(S$bg) ( 
Stop: scale-color($bg, $lightness: if-bright($5bg,80$,40*9$)); 
$middle-1: scale-color($bg, $lightness: if-bright($5g,202$,102)); 
$middle-2: scale-color($bg, $lightness: if-bright($bg,-2$£,-52)); 
Sbottoms scale-color($bg, $lightness: if-bright($bg,-10$2,-2098)); 
Qinclude background-image(linear-gradient( 
$top, $middle-1 50$, $middle-2 50$, S$bottom)); 
} 
Qmixin nice-button(S$bg: #eee) { 
Qextend nb-reset; 
// 一 般 样式 
background-color: Sbg; 
border-color: scale-color(S$bg, Slightness: -20%); 
color: text-contrast($bg); 
QGinclude nb-gradient(rgba($bg, .7)); // alphaG€-ri 
text-shadow: scale-color($bg, Slightness: 
if-bright($bg,25$,-252$)) 0 1px 1px; 
Qinclude box-shadow (rgba(#fff, 
if-bright($bg,.6,.2)) 0 0 1px 1px inset); 
// 状态 样式 
&:hover, &:focus { 
background-color: 
scale-color($bg, $lightness: if-bright($bg, 85$, 25%)); 
} 
&:active ( 
background: scale-color($bg, 
Slightness: if-bright(S$bg, 25$, 10%)); 
border-color: rgba(*000, if-bright(S$bg, .4, .8)); 
Qinclude box-shadow( 
if-bright($bg, 
rgba(mix($bg, #000, 252), .4), rgba(mix($bg, #000), .9) 


) 0 2px 12px inset 
) i 


solid } 


7 


none } 
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图 10-10 展 示 了 一 个 使 用 该 扩展 的 例子 。 


Button Test 


Click Me! | Click Me! | Click me! | Click Me! 





图 10-10 nice-buttons 颜 色 试 验 


现在 ， 使 用 这 个 扩展 ， 任 何 Compass 用 户 都 能 够 使 用 一 行 Sass 代 码 创建 漂亮 的 CSS3 授 钮 。 但 
征 你 现在 还 有 工作 要 做 。 是 时 候 学 习 将 这 个 演示 打包 成 一 个 示例 项 目 了 , 然后 我 们 将 看 看 应 该 如 
何 分 至 这 个 扩展 。 


10.5 创建 一 个 模板 


你 的 扩展 已 经 能 够 正常 运行 ,是 时 候 准 备 对 外 发 布 了 ,既然 你 已 经 有 了 一 个 不 错 的 工作 演示 ， 
你 可 以 将 它 纳 入 扩展 来 向 新 用 户 展 示 nice-buttons 扩 展 的 运行 方式 。Compass 人 允许 扩展 作者 加 入 模 
板 来 帮助 用 户 快 速 开始 使 用 扩展 。 对 于 你 创建 的 这 种 扩展 ,模板 仅仅 是 一 个 演示 ; 但 是 对 于 更 大 
型 、 更 复杂 的 扩展 , 你 可 能 需要 使 用 模板 来 引导 启动 一 个 复杂 的 框架 。 下 面 展 示 了 一 个 使 用 模板 
和 Sass 扩 展 的 扩展 目录 结构 ， 如 代码 清单 10-15 所 示 。 


代码 清单 10-15 ”扩展 目录 模式 


my-extension/ 
stylesheets/ 
my-extension.scss 
templates/ 
project/ 
manifest.rb 
test.html 
Lest .SCSS 
lib 
my-extension.rb 
my-extension/ 
sass_extensions.rb 


你 没有 必要 对 nice-buttons 扩 展 编写 一 个 Sass 扩 展 , BERRE EA AeA KRR 
很 好 。 为 了 将 你 的 演示 转换 成 一 个 模板 ， 你 需要 复制 demo.html 和 demo.scss 到 mice-buttons/templates/ 
project 中 。 然 后 你 需要 创建 一 个 manifest.rb 文 件 ， 它 将 帮助 Compass 定 位 和 识别 资源 。 
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manifest .rb 在 templates/project 目 录 下 ,将 模板 需要 的 资源 编制 成 列表 ,你 也 可 以 添加 项 目 描 述 、 
帮助 文本 ( 运行 compass help nice-buttons 时 显示 )， 以 及 一 段 在 安装 扩展 时 显示 的 欢迎 信 
息 。 下 面 展示 的 是 为 nice-buttons 编 写 的 manifest .rp 文件 ， 如 代码 清单 10-16 所 示 。 














代码 清单 10-16 nice-buttons/templates/project/manifest.rb 


stylesheet 'demo.scss', :media => 'screen, projection' 
html 'demo.html' 
image 'screenshot.png' 


description "Create beautiful CSS3 buttons from a single color" 

help "This will install a demo (HTML and Scss) to show you how to use 
nice-buttons" 

welcome message %Q{ 

Example usage: button { Ginclude nice-buttons (#444) } 

See demo.html and demo.scss for example usage. 

See screenshot.png for a screenshot of the rendered demo. 

Enjoy! 

} 


在 扩展 中 包含 文档 , 使 用 欢迎 信息 和 帮助 文本 支持 URL ( 如 果 你 的 扩展 售 有 URL ) 也 许 都 是 
韭 常 好 的 主意 
将 演示 作为 模板 添加 进 井 入 扩展 之 后 ， 扩 展 的 目录 结构 如 代码 清单 10-17 所 示 。 


代码 清单 10-17  nice-buttons H 5&2 jJ 


nice-buttons/ 











stylesheets/ 
color-helpers.scss 
nice-buttons.scss 
templates/ 
project/ 
demo.html 
demo.scss 
manifest.rb 


如 果 用 户 在 他 们 项 目的 extensions 目 录 中 包含 了 nice-buttons 扩 展 ,他 们 可 以 通过 运行 下 面 的 命 
令 来 安 儿 默认 模板 : 
compass install nice-buttons 
这 条 命令 将 使 用 项 目的 Compass 配 置 把 templates/project 中 的 资源 复制 到 合适 的 位 置 。 如 果 你 
在 templates/warm-cookies 目 录 中 创建 了 第 二 个 模板 ， 用 户 就 可 以 通过 传递 目录 名 称 来 安装 它 


compass install nice-buttons/warm-cookies 


在 发 布 之 前 ， 你 最 好 再 为 扩展 添加 一 个 README 文 件 来 描述 扩展 的 作用 、 使 用 方法 和 安装 
方法 。 但 是 鉴于 本 章 编 瑟 的 目的 , 对 创建 扩展 的 讲述 就 到 此 为 止 了 。 你 的 扩展 现在 拥有 一 个 不 错 
的 演示 ， 并 且 已 经 做 好 了 分 至 的 准备 。 接 下 来 ,我们 将 看 看 如 何 发 布 这 个 扩展 以 便 其 他 人 使 用 。 
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10.6 分 发 扩展 


过 去 ，Web 设 计 社 区 中 主要 的 分 享 方式 是 博客 ,使 用 的 是 zip 压 缩 文 件 。 尽 管 开发 者 喜欢 通过 
复杂 的 版 本 控制 和 分 发 渠道 来 发 布 软件 , 但 设计 师 则 依赖 于 更 简单 的 方法 。 如 今 ， 越 来 越 多 的 设 
计 师 参与 到 了 开源 之 中 ， 是 时 候 学习 如 何 正确 地 分 发 软件 了 。 

这 是 一 个 非常 深入 的 话题 , 因此 本 节 内 容 只 介绍 不 同 分 发 方法 的 概念 , 不 打算 详细 讲述 分 发 
开源 软件 的 方法 。 


10.6.1 在 存档 中 分 发 扩展 


分 发 Compass 扩 展 的 最 简单 方法 是 将 它 压缩 为 一 个 zip 文 件 并 上 传 到 存档 中 , 然后 将 它 放置 到 
某 个 服务 大 上 。 尽 管 这 种 方法 不 占用 时 间 ， 但 是 有 几 个 缺点 。 

首先 ,更 新 需要 用 户 上 自己 手 动 蔡 换 旧 的 代码 。 当 文件 位 于 多 个 地 方 时 ,这 将 会 是 一 件 非 常 痛 
应 的 事 。 其 次 ， 由 于 没有 严格 的 版 本 控制 ， 当 你 必须 在 一 个 项 目的 几 个 不 同 历史 版 本 下 工作 时 ， 
试图 维护 旧 的 发 布 版 本 是 一 个 巨大 的 挑战 。 尽管 版 本 控制 系统 会 保存 每 个 文件 的 所 有 历史 版 本 并 
提供 标签 之 类 的 功能 ， 但 是 存档 仅仅 是 你 的 扩展 在 某 个 时 间 点 的 快照 。 这 会 种 来 诸多 的 局 限 。 



































10.6.2 ”将 扩展 作为 Ruby gem 分 发 


Ruby gem 是 打包 和 分 发 代码 的 一 种 精密 方式 。 针 对 我 们 的 需求 ， 发 布 gem 的 最 有 利之 处 是 内 
建 的 依赖 管理 。 你 可 以 要 求 扩 展 的 用 户 具有 其 他 特定 版 本 的 gem， 如 Sass 和 Compass。 当 然 , 你 对 
于 任何 分 发 都 可 以 添加 一 个 README 文 件 来 说 明 最 低 文 持 厂 本 , 但 是 对 于 gem， 只 是 简单 地 安装 
gem 就 将 同时 获取 并 安装 你 所 依赖 全 部 gem 的 正确 版 本 。 

使 用 一 个 ad hoc 扩 展 ， 用 户 必须 将 扩展 中 的 所 有 代码 复制 到 他 们 项 目的 extensions 目 录 中 。 但 
是 使 用 gem， 扩 展 代 码 将 存在 于 一 个 集中 的 位 置 ， 这 允许 多 个 项 目 使 用 同样 的 扩展 代码 。 

1. 将 ad hoc 扩 展 转 换 为 gem 

为 了 将 你 的 扩展 作为 Ruby gem 分 发 ， 你 需要 在 你 的 项 目 中 添加 几 个 文件 ， 如 图 10-11 所 示 。 


eoo C] nice-buttons-gem 
Name 
i lib 
rb nice-buttons.rb 
LICENSE 
nice-buttons.gemspec 











v 


~a] README.md 
| v Gg stylesheets 
. color-helpers.scss 
nice-buttons.scss 
Y |. project 
* demo.html 
demo.scss 
tb manifest.rb 
二 screenshot.png 


图 10-11 gem 项 目 设置 





一 > 一 
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一 个 gem 至 少 需要 拥有 一 个 gemspec 和 一 个 lib 目 录 , 目录 包含 一 个 以 该 gem 命 名 的 Ruby 文 件 。 
你 将 使 用 nice-buttons .*b 文 件 在 Compass 中 注册 你 的 扩展 ， 并 告诉 Compass 扩 展 目录 的 位 置 。 
下 一 个 代码 清单 展示 了 nice-buttons .rb 的 代码 ， 如 代码 清单 10-18 所 示 。 


代码 清单 10-18 nice-buttons.rb 





require 'compass' 


Compass::Frameworks.register('nice-buttons', 


:sStylesheets directory => File.join(File.dirname( FILE ), 
'stylesheets'), 

:templates directory => File.join(File.dirname( FILE ), 
'templates')) 





上 上面 的 代码 可 能 看 起 来 不 如 你 过 去 看 到 的 Sass 代 码 漂亮 ,但 是 基本 上 来 说 , 你 只 是 在 告诉 gem 
它 需 要 Compass gem。 然 后 ， 使 用 一 个 Compass 子 数 来 注册 一 个 叫做 nice-buttons 的 扩展 并 告诉 
Compass 可 以 在 哪里 找到 stylesheets 和 templates 目 录 。 

现在 ， 让 我 们 来 看 看 nice-buttons .gemspec 文 件 。 一 个 gemspec 有 很 多 不 同 的 方式 ， 
但 是 我 们 只 看 其 中 一 种 简单 的 方法 ， 如 代码 清单 10- - 








代码 清单 10-19 nice-buttons.gemspec 


# -*- encoding: utf-8 -*- 
Gem::Specification.new do |gem| 
gem.name - "nice-buttons" 
gem.version = "1,0,0" 
["Brandon Mathis" ] 
["brandonGimathis.com"] 


gem.authors 
gem.email 


gem.description 
"Easily create beautiful CSS3 buttons with Compass." 

"Nice and easy CSS3 buttons for Compass users" 

"http://github.com/imathis/nice-buttons" 


gem.summary 
gem.homepage 


gem.files $w(README.md LICENSE) 


gem.files += Dir.glob("lib/**/*") 

gem. files += Dir.glob("stylesheets/**/*") 
gem. files += Dir.glob("templates/**/*") 
gem.add dependency "sass", ">= 3.2" 
gem.add_dependency "compass", ">= 0.12" 


end 








个 文件 有 两 个 部 分 。 第 一 个 部 分 由 关于 gem 的 元 数据 组 成 : 它 的 名 字 、 版 本 号 、 作 者 等 。 
"es 分 包括 gem 的 文件 ， e LfigemB iki. ETUR RETO F SassllCompass Agri 
特性 ， 要 求 用 户 拥 有 的 版 本 不 低 于 Sass 3.25 Compass 0.12. 
经 过 以 上 这 些 设置 ， 你 可 以 通过 下 面 的 这 条 命令 让 Ruby gems 生 成 你 的 gem 文 件 : 


gem build nice-buttons.gemspec 


这 条 命令 将 在 项 目的 根 目 录 中 生成 一 个 叫做 nice-buttons-1.0.0.gem 的 gem 文 件 。 
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2. 发 布 gdem 

为 了 发 布 这 个 gem， 你 需要 在 RubyGems.org ( 一 个 用 来 托管 gem 的 免费 中 央 仓 库 ) 创建 一 个 
账户 ， 并 根据 步骤 进行 设置 。 当 一 切 就 绪 ， 你 可 以 通过 运行 下 面 这 条 命令 来 发 布 你 的 gem: 

gem push nice-buttons-1.0.0.gem 

运行 之 后 ， 任 何人 都 可 以 立即 安装 你 的 gem 并 开始 使 用 你 的 扩展 。 

3. 安装 gem 

你 可 以 通过 在 终端 中 运行 下 面 这 条 命令 来 手动 安装 你 的 gem: 

gem install nice-buttons 

这 条 命令 将 从 RubyGems.org 获 取 gem， 如 果 你 没有 合适 版 本 的 Compass 或 Sass， 它 会 为 你 自 
动 安 装 。 很 明显 这 上 比 使 用 一 个 zip 压 缩 文件 要 好 。 

为 了 开始 在 一 个 Compass 项 目 中 使 用 你 的 gem, 你 需要 在 Compass 配 置 文件 的 顶部 添加 下 面 一 
行 代 码 : 

require "nice-buttons" 

现在 Compass 了 解 了 你 的 gem， 你 可 以 引入 nice-buttons 样 式 表 并 在 你 的 项 目 中 使 用 它 。 如 果 
你 喜欢 ， 也 可 以 通过 下 面 的 命令 行 来 安装 你 在 前 面 创 建 的 演示 项 目 : 

compass install nice-buttons 

这 条 命令 将 解压 你 的 演示 文件 到 Compass 项 目 , 并 重新 编译 你 的 样式 表 。 过 去 , 这 是 安装 gem 
并 在 Compass 中 使 用 的 最 普遍 方法 ,而 最 近 , 许多 开发 者 已 经 开始 使 用 一 种 叫做 Bundler 的 技术 来 
使 用 和 管理 gem。 

4. 使 用 bundler 安 装 gem 

Bundler ( http://gembundler.com ) 是 一 个 帮助 你 在 项 目 中 安装 并 管理 Ruby gem 的 gem。Bundler 
使 用 一 个 Gemfile 文 件 列 出 项 目 中 正在 使 用 的 gem。 下 面 展示 的 是 如 何 将 你 的 gem 添 加 到 列表 中 ， 
如 代码 清单 10-20 所 示 。 


代码 清单 10-20 ”在 Gemfile 中 添加 nice-buttons 






































source :rubygems 


group :assets do 
gem 'nice-buttons' 


end 
Gemtfile 更 新 完毕 之 后 ， 你 可 以 通过 一 条 简单 的 命令 来 安装 gem: 
bundle 


这 条 命令 将 连接 到 RubyGems.org， 找 到 nice-buttons gem 的 最 新 版 本 以 及 所 有 依赖 ,并 在 你 的 
系统 中 进行 安装 。 它 同时 创建 了 一 个 叫做 Gemfile.lock 的 文件 ， 其 中 包含 你 的 项 目 中 正在 使 用 的 
gem 完 全 列表 ， 及 其 版 本 号 、 下 载 源 和 gem 依 赖 的 层级 关系 。 这 些 详细 信息 被 保存 下 来 ， 以 确保 
不 会 因为 使 用 了 不 兼容 的 版 本 而 出 现 问题 。 手 动 完 成 这 些 工 作 将 会 非常 痛 兰 ， 因 此 Bundler 的 普 
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及 并 不 令 人 意外 。 

为 了 和 Compass 一 起 使 用 Bundler， 在 你 的 Compass 命 令 前 面 加 上 bundle exec， 如 下 所 示 : 

bundle exec compass compile 

这 条 命令 将 使 Compass 获 取 Gemfile 中 的 资源 组 , 它 在 那里 能 找到 你 的 扩展 并 使 其 为 你 的 项 目 
所 用 。 如 果 想 要 安装 你 创建 的 演示 项 目 ， 你 可 以 运行 下 面 这 条 命令 : 

bundle exec compass install nice-buttons 

在 你 的 gem 安 装 完 成 之 后 ， 用 户 可 以 引入 你 的 nice-buttons 样 式 表 并 开始 使 用 你 的 代码 。 

将 扩展 作为 一 个 Ruby gem 分 发 非常 容 匈 ， 比 起 在 存档 中 分 享 扩 展 , 它 审 来 的 好 处 完全 值得 我 
们 付出 努力 。 但 是 在 你 和 别人 分 享 代码 之 后 ,他 们 很 有 可 能 会 发 现 bug， 想 要 提供 一 些 改善 建议 。 
这 又 市 来 了 一 个 新 的 挑战 , 即 与 其 他 开发 者 交流 并 讨论 代码 贡献 , 尤其 是 在 你 的 扩展 变 得 受 欢迎 
之 后 。 为 了 解决 这 个 问题 ， 我 们 将 介绍 Github， 这 是 一 个 与 开源 社区 进行 合作 的 优秀 资源 。 























10.6.3 ”在 Github 上 进行 代码 社交 


现在 有 很 多 开源 社区 ， 但 是 Github 是 到 目前 为 止 最 党 欢迎 的 。Github 将 在 一 个 精心 设计 的 网 
站 上 托管 你 的 代码 , 方便 其 他 人 浏览 并 下 载 。 它 也 能 为 你 提供 工具 来 管理 贡献 者 , 发 布 项 目 网 站 ， 
并 且 编 辑 wiki。 其 他 的 Github 用 户 可 以 复制 你 的 项 目 ， 做 出 改进 ， 然 后 将 他 们 做 出 的 修改 反馈 给 
你 。 使 用 Github 的 issue tracker, 你 可 以 回顾 并 接收 代码 贡献 , 将 它们 直接 从 网 站 合并 入 你 的 项 目 。 
Github 回 所 有 开源 项 目 免费 提供 上 述 服务 。 

为 了 将 你 的 扩展 发 布 在 Github 上 ， 你 需要 谎 加 一 个 新 的 仓库 ， 并 依照 简单 的 指令 来 提交 并 推 
送 你 的 扩展 。 如 果 将 一 个 README 文 件 添加 到 你 的 项 目 ，Github 将 会 在 你 的 项 目 主页 中 展示 它 。 
你 现在 就 可 以 在 Github 中 查看 nice-buttons gemf*] € Xt http:;//github.com/imathis/nice-buttons, ， 如 图 
10-12 所 示 。 

如 果 你 发 布 了 一 个 adhoc 扩 展 ， 用 户 可 以 从 项 目 网 站 下 载 nice-buttons ， 或 者 通过 在 extensions 
目录 中 运行 下 面 这 条 命令 来 安装 它 : 

git clone https://github.com/github user name/nice-buttons.git 

之 后 ， 用 户 可 以 通过 在 他 们 的 extensions/nice-buttons 目 录 中 运行 下 面 的 命令 来 更 新 到 最 新 
版 本 : 

git pull 

这 条 命令 将 下 载 扩 展 的 最 新 版 本 ， 但 是 如 果 你 的 扩展 需要 一 个 更 新 版 本 的 Sass、Compass 或 
者 其 他 gem， 用 户 需 要 手动 将 其 更 新 到 正确 的 版 本 。Github 是 一 个 托管 开源 代码 的 好 地 方 ， 你 可 
以 在 此 与 他 人 合作 ， 但 是 如 果 你 想 要 依赖 管理 ， 就 应 该 将 你 的 代码 作为 一 个 Ruby gem 来 分 发 。 

关于 如 何 分 发 和 管理 开源 软件 ， 还 有 很 多 需要 学 习 , 但 是 本 市 提供 了 一 个 良好 的 起 点 。 记 住 
一 条 通用 的 准则 : 尝试 是 最 好 的 学 习 方 式 。 
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github a © (9 Explore Gist Blog Help imas Ẹ X E 
imathis / nice-buttons [1 Pull Request G} Unwatch ~  * Star 1 P Fork 1 
Code Network Pull Requests 0 Issues 0 Wiki Graphs Admin 


A Compass extension for Nice and easy CSS3 buttons. — Read more 


€ Clone in Mac c» ZIP HTTP. SSH  GitRead-Only https://github.com/imathis/nice-buttons.git (P) Read«Write access 
b branch: master ~ Files Commits Branches 1 Tags Downloads 
test c to the master branch 


Updated the setup instructions for installing with bundler 


2 imathis authored 15 hours ag (E) commit ebcOei6ace 


nice-buttons / 





name age message history 
Em lib 15 hours ago Initial release [imathis] 
iiS stylesheets 15 hours ago Initial release [imathis] 
il templates 15 hours ago Initial release [imathis] 
[S README.md 15 hours ago Updated the setup instructions for installing with bundlder [imathis] 
[E] nice-buttons.gemspec 15 hours ago Initial release [imathis] 
£A README.md 
Nice-Buttons 


Nice Buttons makes it easy to create beautiful CSS3 buttons. This is an extension for the Compass framework. 


Installation with Bundler 








If you have the Bundler gem installed, add this line to your application's Gemfile: 











[10-12  nice-buttonsJii H v1 [Hj 


10.7 h 


ERER, (RYE SSassfiCompassA 4X BE E m MRR R REJ, EEHEEHE L — 
种 从 未 有 过 的 方式 来 分 享 知 识 和 经 验 , 参与 到 设计 社区 中 。 我们 探索 了 如 何 编写 此 在 与 他 人 分 享 
的 样式 表 。 我 们 在 一 步 步 创建 、 重 构 以 及 打包 一 个 优秀 的 Compass 扩 展 的 过 程 中 探讨 了 设计 优秀 
扩展 的 原则 。 我 们 也 了 人 解 了 分 发 扩展 的 不 同方 法 ， 并 和 学习 了 分 至 代码 以 及 同 其 他 人 合作 的 方式 。 

通过 对 本 书 全 部 内 容 的 学 习 ， 你 已 经 了 解 了 Sass 作 为 一 门 动态 样式 表 语 言 的 威力 ， 以 及 它 怎 
样 帮 你 编写 更 易 恋 、 更 具 可 维护 性 的 样式 表 。 你 了 解 了 Compass 如 何 提供 一 个 可 徘 的 库 ， 顺畅 地 
整合 到 你 的 开发 环境 中 ,并 为 你 提供 一 个 构建 与 分 享 知 识 的 绝 佳 平台 。 通过 为 你 提供 新 六 有 趣 的 
挑战 和 更 好 的 回报 ，Sass 和 Compass 击 败 了 无 聊 的 CSS。 无 论 你 是 Sass 和 Compass 新 手 还 是 老手 ， 
我 们 都 希望 本 书 能 够 让 你 以 全 新 的 视角 来 看 待 样式 表 , 掌握 新 的 技巧 ,加 次 对 样式 表 的 理解 ， 并 
能 够 大 胆 地 自由 发 控 ， 尝 试 更 好 的 创意 。 























妇 疾 Sass 和 Compass 























sassRiCompass 部 是 基于 Ruby 编 各 语言 的 命令 行 工具 。 要 使 用 它们 ， 你 首先 需要 在 电脑 中 安 
"Ruby, 并 对 电脑 的 命令 行 操 作 有 一 个 基本 的 理解 。 Sass 和 Compass 可 以 安装 在 Windows、Mac OS 
X 和 Linux 系 统 中 。 


A.1 在 Windows 系 统 中 安装 


Windows 系 统 并 没有 预 置 Ruby， 因 此 如 果 你 之 前 没有 安装 过 Ruby, 现在 就 需要 进行 安装 。 安 
滨 Ruby 只 需要 花费 几 分 钟 的 时 间 。 











人 人 二 cs 


A.1.1 打开 Windows 命 令 行 窗口 


在 Windows 7 系统 下 ， 你 可 以 在 Window 开 始 沫 单 中 选择 程序 > 附件 > 命令 行 来 打开 命令 行 
口 。 你 ,也 可 以 在 搜索 框 中 输入 commana， 并 从 搜索 结 采 中 选择 命令 行 。 

在 Windows 7 之 前 的 Windows 版 本 中 ， 你 可 以 通过 选择 属性 > 附件 > 命令 行 来 打开 命令 行 窗 

。 你 也 可 以 选择 运行 ， 然 后 输入 cmgd 并 按 下 回 车 键 。 

当 命 令 行 开 始 运 行 时 ， 你 应 该 看 到 像 图 A-1 这 样 的 窗口 。 








Command Prompt amza 


Microsoft Windows [Uersion 6.1.7600] ^ 
Copyright <c> 2009 Microsoft Corporation. fll rights reserved. r 


GC:\Users\Chris Eppstein> 








KIA-1 Windows 命 令 行 窗 口 
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A.1.2 ”在 Windows 中 安装 Ruby 


在 命令 行 窗口 中 输入 ruby -v 并 按 下 回 车 键 。 如 果 电 脑 中 没有 安 逆 Ruby ， 命 令 行 将 显示 
'ruby' is not recognized as an internal or external command, operable program 
or batch file。 如 打 电 脑 中 已 经 安装 了 Ruby， 那 么 将 打印 出 已 经 安装 好 的 Ruby 版 本 号 。 你 安 
装 的 Ruby 版 本 应 该 不 低 于 1.8.7 (如 果 你 安装 的 Ruby 版 本 为 1.8.6 或 者 更 低 ， 请 按照 下 面 的 指示 重 
新 安装 Ruby， 如 图 A-2 所 示 )。 





(& Downloads - Windows Internet Explorer 





QU wo|€*9 http://rubyinstaller.org/dovwnloads/ 
y Favorites | 25 9 Suggested Sit; v Æ) Web Slice Gallery v 


€> Downloads te M v iz 


«v Rubyiastalle a 
for Windo| 0% of rubyinstaller-1.9.2-p136.exe from ...rubyforgevm... | c || © || Z3 | 











/ File Download - Security Warning 
Downloacs Do you want to run or save this file? 
/ m Name: rubyinstaller-1.9.2-p136.exe ped 
Type: Application, 11.9MB 
From: files.rubyforge.vm.bytemark.co.uk 
Rubyinst àllers 
D ED Come —] 
iS Ruis2pi 
1 : aim A GW 4 
$9 Ruby 1.9.1-p430 Ww While files from the Intemet can be useful, this file type can B 
; Y 人 potentially harm your computer. If you do not trust the source, do not ich of 
$9 Ruby 1.8.7-p330 S run or save this software. What's the risk? D supp 
i5! Ruby 1.8.6-p398 UTTS-SUCIT2S Runy FT Tibkogiri, 


图 A-2 ”下 载 Ruby 安 装 程序 








进入 网 址 http:/rubyinstallerorg/downloads/， 下 和 载 最 新 版 本 的 Ruby 安 装 程 序 并 运行 。 根 据 安 装 
程序 的 提示 按照 步骤 进行 安 疼 。 第 三 个 窗口 将 询问 你 将 Ruby 安 闭 在 什么 位 置 , 在 点 击 安装 之 前 选 
中 两 个 复 选 框 ， 如 图 A-3 所 示 。 











Installation Destination and Optional Tasks 


Setup will install Ruby 1.9.2-p136 into the following folder. Click Install to 
continue or dick Browse to use a different one. 


Please avoid any folder name that contains spaces (e.g. Program Files). 


[V] Add Ruby executables to your PATH 


Associate .rb and .rbw files with this Ruby installation 
^T 
b! 


Check- these checkboxes 


Required free disk space: 31.6 MB 








图 A-3 ”配置 Ruby 安 装 程序 
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现在 , 重新 启动 你 的 命令 行 窗口 , 然后 输入 ruby -v 并 按 下 回 车 键 来 确认 Ruby 已 经 安装 完成 ， 


如 图 A-4 所 示 。 


Command Prompt babai 


Microsoft Windows [Version 6.1.7600] 
Copyright <c>) 2009 Microsoft Corporation. fll rights reserved. 


C:\Wsers\Chris Eppstein>ruby -u 
ruby 1.9.2p136 《2010-12-25》 [i386-mingw32] 


CG:\Users\Chris Eppstein >», 





KlA-4 Ruby 安装 完成 


A.1.3 在 Windows 系 统 中 安装 Sass 和 Compass 


Ruby 目 市 一 个 叫做 RubyGems 的 系统 ,用 来 安 痛 基于 Ruby 的 软件 。 我 们 可 以 使 用 这 个 系 乡 
轻松 地 安装 Sass 和 Compass。 要 安装 最 新 版 本 的 Sass 和 Compass， 你 需要 输入 下 面 的 命令 : 


$ gem install sass 
$ gem install compass 


TERE—^ P AC RIER, MERE SEAT P dti: 


Successfully installed sass-3.1.0 

1 gem installed 

Installing ri documentation for sass-3.1.0... 
Installing RDoc documentation for sass-3.1.0. 


装 完成 之 后 ， 你 应 该 通 运行 下 面 的 命令 来 确认 应 用 用 已 经 正确 地 安装 到 了 电脑 中 : 


S sass -v 
Sass 3.1.0 (XXX NAME ME) 





$ compass -v 

Compass 0.11.0 

Copyright (c) 2008-2011 Chris Eppstein 
Released under the MIT License. 


A.2 在 MAC OS X 系 统 中 安装 
一 段 时 间 以 来 ，MAC OS X 系 统 中 都 默认 安装 有 Ruby， 因 此 你 可 能 并 不 需要 进行 安装 。 





来 
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A.2.1 打开 Mac OS X 终 端 窗口 


你 可 以 在 Finder 中 通过 点 击 应 用 程序 > 实用 工具 ， 然 后 双击 终端 ,app 来 运行 终端 应 用 程序 ， 
如 图 A-5 所 示 。 


15 Setup - Ruby 1.9.2-p136 o] 局 mom 
Installation Destination and Optional Tasks X x 
P 


Setup will install Ruby 1.9.2-p136 into the following folder. Click Install to 
| continue or dick Browse to use a different one. 


Please avoid any folder name that contains spaces (e.g. Program Files). 
C:Ruby 192 | Browse... 


[V] Add Ruby executables to your PATH 
~ Associate .rb and .rbw files with this Ruby installation 


Required free disk space: «31.6 MB 


= Back | Install | | Cancel 
图 A-5 运行 Mac OS X 终 端 


如 果 你 不 熟悉 Mac OS X 终 端 , 我 们 向 你 推荐 John Long 编 写 的 终端 教程 , 参见 http://wiseheartdesign 
.com/articles/2010/11/12/the-designers-guide-to-the-osx-command-prompt/。 


A.2.2 ”安装 Ruby 


在 命令 行 中 输入 ruby -v 并 按 下 回 车 键 。 如 果 你 的 电脑 中 没有 安装 Ruby, 命令 行将 显示 bash: 
ruby: command not found。 这 种 情况 不 太 可 能 发 生 ， 如 果 发 生 ， 请 按照 http:/rubyosx.rubyforge.org/ 
的 安装 步 又 安 妆 Rupby， 并 确保 在 安 闭 完成 之 后 重 司 终端 窗口 。 




















A.2.3 在 Mac 中 安 效 Sass 和 Compass 


Ruby 目 市 一 个 叫做 RubyGems 的 系统 ， 用 来 安装 基于 Ruby 的 软件 。 我 们 可 以 使 用 这 个 系统 来 
轻松 地 安装 Sass 和 Compass。 要 安装 最 新 版 本 的 Sass 和 Compass， 你 需要 输入 下 面 的 命令 : 


$ sudo gem install sass 
$ sudo gem install compass 


TERE— SNR EF, BERE SUA P 8H: 


Successfully installed sass-3.1.0 

1 gem installed 

Installing ri documentation for sass-3.1.0... 
Installing RDoc documentation for sass-3.1.0... 
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"Ou. MAEZ IB Toe WHO ZEB ERI T rr : 


S sass -v 
Sass 3.1.0 (XXX NAME ME) 


$ compass -v 
Compass 0.11.0 


Copyright (c) 2008-2011 Chris Eppstein 
Released under the MIT License. 


A.3 Linux n xe 


如 果 你 的 Linux 系 统 中 没有 安装 Ruby， 请 参照 Linux 系 统 发 布 版 本 的 指示 来 安装 Ruby。 





A.3.1 f$JJFLinux£Z& sg; 
SATA Linux H] P XR UM FT JT 2X 9m o 


A.3.2 安装 Ruby 








如 果 你 的 电脑 中 没有 安装 * Ruby, 使 用 Linux 发 布 版 本 的 软件 安装 机 制 来 安装 Ruby。 


A.3.3 ”在 Linux 系 统 中 安装 Sass 和 Compass 


Ruby 目 币 一 个 叫做 RubyGems 的 系统 ， 用 来 安装 基于 Ruby 的 软件 。 我 们 可 以 使 用 这 个 系统 来 
轻松 地 安装 Sass 和 Compass。 要 安装 最 新 版 本 的 Sass 和 Compass， 你 需要 输入 下 面 的 命令 : 


$ sudo gem install sass 
$ sudo gem install compass 


TERE— PC RIEP, BERE IA P dst : 


Successfully installed sass-3.1.0 

1 gem installed 

Installing ri documentation for sass-3.1.0... 
Installing RDoc documentation for sass-3.1.0. 


安装 完成 之 后 ， 你 应 该 通 运行 下 面 的 命令 来 确认 应 用 已 经 正确 地 安 闭 到 了 电脑 中 : 


$ sass -v 
Sass 3.1.0 (XXX NAME ME) 


$ compass -v 

Compass 0.11.0 

Copyright (c) 2008-2011 Chris Eppstein 
Released under the MIT License. 
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B.1 创建 一 个 新 项 目 
要 在 一 个 新 项 目 中 使 用 Compass， 打 开 你 的 终端 窗口 并 运行 下 面 的 命令 : 


$ compass create my-project 
如 果 my-project 目 录 不 存在 ， 上 述 命令 会 创建 一 个 叫做 my-project 的 目录 并 在 其 中 添加 以 下 文件 : 


my-project/ 
config.rb 
- sass/ 
- ie.scss 











- print.scss 

- Screen.scss 
- stylesheets/ 

- ie.css 

- print.css 

- Screen.css 


如 果 你 没有 为 compass _ create 命令 传递 一 个 目录 参数 ， 它 将 使 用 你 当前 所 在 的 目录 。 

在 config.rb 文 件 中 , 你 可 以 对 Compass 的 一 些 配置 进行 修改 , 例如 资源 位 置 和 压缩 程度 (我 
们 将 在 后 面 深 入 讨论 )。sass 目 录 包 含 了 一 些 初始 的 样式 表 , 你 可 以 对 它们 进行 编辑 、 重 命名 , 或 
者 完全 抛弃 , 但 是 这 个 文件 夹 是 你 存放 Sass 样 式 表 的 地 方 。 最 后 ，stylesheets 目 录用 于 存放 编译 后 
的 CSS 文 件 。 














B.1.1 在 设置 项 目 时 配置 选项 


使 用 compass create 命令 时 ， 你 可 以 使 用 一 些 选 项 来 配置 你 的 项 目 : 


--bare (不 包含 默认 样式 表 进 行 安 装 ) ; 
--syntax sass (在 默认 样式 表 中 使 用 缩 进 语法 ) ; 
--sass-dir "cool" (4& f| 'cool' 目录 存 放 Sass 文 件 ) ; 
--css-dir "style" (使 用 'style' 目 录 存 放 CSS 文 件 ) ; 
--images-dir "img" (使 用 'img' 目 录 存 放 图 片 ) ; 
--ftonts-dir "type" (使 用 'type' 目 录 存 放 字 体 文 件 ) ; 


--javascripts-dir "js" (使 用 'js' 目 录 存 放 JavaScript 文 件 ) 。 
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添加 选项 后 的 命令 如 下 : 

$ compass create my-project --bare --sass-dir "cool" --css-dir "style" 

你 也 许 会 感到 疑惑 ， 为 什么 可 以 设置 一 个 JavaScript 目 录 ? 这 是 因为 Compass 扩 展 还 可 以 打包 
相关 联 的 JavaScript 文 件 , 这 样 的 设置 可 以 让 你 在 安装 扩展 时 告诉 Compass 应 该 在 什么 位 置 存放 这 
些 JavaScript 文 件 。 


B.1.2 在 Rails 项 目 中 添加 Compass 
为 了 在 一 个 Rails 项 目 中 安装 Compass， 首 先 要 使 用 cq 命令 进入 你 的 项 目 目录 ， 并 在 Gemtfile 
文件 中 添加 以 下 内 容 : 


group :assets do 
gem 'compass-rails' 





# Add any compass extensions here 





end 
然后 在 终端 中 运行 下 面 的 命令 : 
$ bundle 


$ bundle exec compass init rails 


在 Rails 项 目 中 , Compass 配 置 文件 位 于 config/compass.rbo 
如 果 你 的 项 目 位 于 Rails 2.3 或 者 3.0， 你 需要 参照 compass-railsREADME 文 件 中 列 出 的 步 
Uk. ZW https://github.com/Compass/compass-rails/blob/master/README.md. 


B.2 ”安装 Compass 扩 展 





Compass 扩 展 以 两 种 形式 发 布 : Ruby gem 和 ad hoc 扩 展 。 两 种 形式 的 扩展 都 非常 容易 安装 并 
日 能 在 所 有 项 目 中 民 好 地 协同 工作 。 如 果 想 了 解 如 何 开 发 扩展 ， 可 以 阅读 第 10 草 相关 内 容 。 





B.2.1 安装 以 Ruby gem 形 式 发 布 的 扩展 
你 可 以 将 扩展 安装 到 你 的 系统 gem 中 ， 如 下 所 示 : 


$ sudo gem install extension-name 

如 条 你 使 用 Bundler， 将 下 面 的 内 容 谎 加 到 你 的 Gemfile 中 : 
gem 'extension-name' 

IREA mP ER gem: 

$ bundle install 


MERE AK gem FRET REP, Be PRm OPE KR RRA H P 
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B.2.2 ”为 已 经 存在 的 项 目 安装 扩展 


既然 你 已 经 拥有 了 一 个 以 gem 形 式 发 布 的 扩展 , 就 可 以 将 以 下 内 容 添 加 到 config .rp 文件 来 
i All Compass: 

require 'extension-name' 

然后 ， 根 据 你 的 项 目 目录 ， 在 终端 中 运行 下 面 命 令 : 

$ compass install -r extension-name -f extension-name 

现在 你 可 以 开始 在 项 目 中 使 用 这 个 扩展 了 。 你 可 以 使 用 compass install 命 令 同 时 安装 多 
个 扩展 ， 只 要 确保 命令 行 中 的 每 个 扩展 前 部 使 用 了 -r 和 -f 标 示 符 。 











为 新 项 目 安 妆 扩展 
如 有 果 你 已 经 安装 了 扩展 的 gem， 可 以 使 用 这 个 扩展 创建 一 个 新 项 目 。 运 行 下 面 的 命令 : 
$ compass create my-project -r extension-name --using extension-name 


这 将 创建 一 个 新 的 Compass 项 目 ， 并 对 其 进行 配置 以 运用 你 的 扩展 。 


B.2.3 ”安装 以 ad hoc 形 式 发 布 的 扩展 


Ad hoc 扩 展 只 是 一 些 目录 ， 其 中 包含 Sass 样 式 表 以 及 在 干 同 Compass 说 明 样 式 表 运行 方式 的 
文件 。 如 果 你 的 项 目 不 包含 一 个 extensions 目 录 ， 创 建 一 个 然后 将 扩展 的 文件 夹 复制 进去 。 你 的 
项 目 文件 结构 应 该 如 下 所 示 : 


my-project/ 





config.rb 
extensions/ 
some-extension/ 
sass/ 
stylesheets/ 


为 了 在 一 个 Rails app 中 安装 adhoc 扩 展 ， 你 需要 在 vendorplugins/compass_extensions 目 录 下 创 
f&— "extensions H 5€; 
你 可 以 通过 在 项 目的 配置 文件 中 设置 extensions_dir 来 自 定 义 扩 展 所 在 的 目录 。 


B.2.4 安 委 扩展 的 模式 


大 多 数 扩展 都 日 市 一 个 默认 的 模式 ， 其 中 包含 一 个 样式 表 或 者 一 个 与 该 扩展 一 起 使 用 的 文 
件 。 这 些 模式 会 连同 compass install 脚 本 一 起 自动 安装 。 但 是 一 些 扩 展 作 者 会 创建 额外 的 模 
XX, 这些 模 式 提供 使 用 例子 , 或 者 用 初始 的 文件 或 者 样板 代码 助 你 一 辟 之 力 。 安 装 一 个 扩展 模式 
的 命令 如 下 所 示 : 

$ compass install extension-name/pattern-name 

Compass 将 会 显示 扩展 作者 包含 在 其 中 的 指令 ( 如 果 有 的 话 ) EUR — T BGB SN ER F 
列表 。 
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解压 扩展 和 框 染 

对 一 些 读者 来 说 , 使 用 作为 Ruby gem 安 装 的 扩展 可 能 有 些 不 同 寻 常 。 有 些 时 候 阅 读 一 个 扩展 
的 源码 也 是 很 有 帮助 的 ， 但 是 Ruby gem 的 源码 可 能 储存 在 电脑 的 别处 。 为 了 解决 这 个 问题 ， 
Compass 提 供 了 一 项 功能 ， 可 以 将 扩展 、 甚 至 Compass 框 架 本 喘 解 压 到 你 的 项 目 目录 中 。 你 需要 
用 到 下 面 的 命令 : 

$ compass unpack extension-name 

$ compass unpack compass 


该 命令 会 将 与 扩展 和 Compass 框 以 相关 的 文件 解压 到 项 目的 extensions 目 录 中 。 因 此 现在 你 的 
项 目 看 起 来 如 下 : 
your-project/ 
extensions/ 


compass-13.0/ 
extension-name-1.0/ 


Compass 同 时 会 输出 一 个 友好 的 警告 , ZR EXAUE "Haupt n 285v. tn Be AER 
变 你 刚才 解压 的 代码 ， 但 修改 代码 是 一 个 不 好 的 举动 ， 将 导致 你 在 升级 扩展 时 失去 目 定义 配置 。 
这 项 功能 的 最 佳 用 途 是 教学 或 者 排除 错误 。 
































B.3 配置 你 的 Compass 项 目 


Compass 是 一 个 Sass 库 , 一 个 扩展 的 平台 , 也 是 一 个 用 于 整合 项 目 环境 的 系统 。Compass 配 置 
将 这 些 部 分 整合 起 来 ， 让 你 的 工作 流程 更 加 顺畅 ， 更 加 灵活 。 


B.3.1 使 用 资源 


在 编写 样式 表 之 外 , 样式 表 作 者 还 会 频繁 地 使 用 图 片 、 字 体 和 JavaScript, 这 些 文 件 经 浓 是 相 
互联 系 的 。 例如, 为 了 显示 一 张 背 景 图 片 ， 样 式 表 逢 要 将 图 厂 的 精确 位 置 告诉 浏览 各 。 如 采 你 曾 
重新 组 织 过 一 个 项 目 或 者 改变 过 一 个 目录 的 名 字 ， 你 一 定 知 道 更 新 这 些 URL 的 痛 茄 。 

Compass 通 过 为 你 编写 资源 URL， 人 致力 于 帮助 你 让 一 切 保 持 同 步 。 在 你 的 配置 文件 中 ， 你 可 
以 告诉 Compass 项 目 资 源 的 位 置 以 及 想 要 生成 怎样 的 URL。 如 果 Compass 在 你 编译 样式 表 时 找 不 
到 某 些 资源 ， 它 甚至 会 输出 一 个 警告 。 





























B.3.2 配置 资源 位 置 


为 了 告诉 Compass 能 在 文件 系统 的 什么 地 方 找到 你 的 资源 ， 你 需要 设置 以 下 配置 
默认 为 <project>/images; 

默认 为 <project>/sass; 

默认 为 <project>/stylesheets; 

默认 为 <project>/<css _dir>/fonts ; 





L] images dir 





L] sass dir 





L] css dir 


Ll fonte dir 
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Q javascripts. dir 默认 为 <project>/javascripts。 

这 些 配 置 与 你 的 项 目 目录 相关 联 ， 因 此 设置 images_dir = img 将 会 告诉 Compass 在 
your-project/img/ 目录 下 查找 你 的 项 目 图 片 。 然 后 ， 在 你 的 样式 表 中 ， 你 可 以 使 用 image-url() 
辅助 硕 来 引用 一 张 网 片 : 

#1ogo { background: url('/img/logo.png') ) 

Compass 会 在 your-project/img/1logo.png 中 寻找 你 的 图 片 ， 然 后 对 下 面 的 CSS 代 人 码 进 行 
编译 : 














#1ogo ( background: url('/img/logo.png') ) 

WREKSA EL BOE EI Web] s a8 8]—^ P^ Hot, 你 可 以 通过 设置 http_path 配 置 来 
日 定义 URL。 你 也 能 为 CSS、 图 片 、JavaScript 以 及 字体 设置 URL 配 置 。 

如 果 你 想 知 道 Compass 中 配置 的 值 ， 可 以 使 用 下 面 的 命令 向 Compass 询 问 : 


$ compass config -p sass dir 
app/stylesheets 

$ compass config -p css dir 
public/stylesheets 


想 要 深入 了 解 Compass 配 置 的 有 关内 容 ， 请 参见 第 8 章 。 











B.4 命令 行 


Compass 中 主要 的 命令 有 : 


L] compass create 





创建 一 个 新 的 Compass 项 目 ; 

L] compass init 为 一 个 已 经 存在 的 项 目 (Rails ) 添加 compass; 
O compass _ clean 一 一 移 除 生成 的 文件 和 缓存; 

生成 你 的 样式 表 ; 

监视 你 的 Sass 文 件 并 根据 变化 重新 生成 文件 。 








Q compass compile 





L] compass watch 
还 有 一 些 有 用 的 命令 : 


L] compass stats 








查看 样式 表 的 统计 数据 ; 

解压 扩展 到 你 的 项 目 ; 

口 compass validate 一 一 验证 你 生成 的 CSS 文 件 ; 

显示 版 本 、 许 可 证 ， 等 等 ; 

进入 一 个 用 于 测试 Compass 中 SassScript 的 控制 台 。 





L] compass unpack <extension> 





Q compass version 





L] compass interactive 
3B 
犹 得 帮助 


使 用 Compass 时 需要 记 住 许多 东西 ,但 是 你 也 可 以 通过 询问 命令 行 来 寻求 帮助 。 运 行 compass 
help 将 列 出 以 下 信息 : 
口 市 有 描述 的 命令 ; 
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Q 可 用 的 框 染 和 扩展 ; 

Q compass 命 令 的 全 局 选项 。 

你 也 可 以 像 下 面 这 样 ， 获 取 一 个 子 命令 的 详细 带 助 信息 : 

$ compass help watch 

运行 这 条 命令 ， 你 将 获取 关于 compass watch 命 令 用 法 的 详细 描述 ， 它 的 语法 ， 以 及 一 列 
寓 有 话 细 描述 的 选项 。 

你 也 可 以 获取 关于 扩展 或 者 扩展 模式 的 帮助 信息 : 


$ compass help extension-name 
$ compass help extension-name/pattern 


如 果 扩 展 的 作者 没有 在 扩展 中 添加 帮助 文本 ,以 上 的 命令 将 会 显示 默认 的 Compass 帮 助 内 容 。 








Sass 语 法 


C.1 4axtSass 5 SCSS 


本 书 的 大 部 分 章节 都 在 讲述 SCSS 语 法 , SCSS 代 表 Sassy CSS。SCSS 是 CSS 的 超 集 , 换 句 话说 ， 
任何 有 效 的 CSS 文 件 也 是 一 个 有 效 的 SCSS 文 件 。 这 意味 着 你 可 以 将 CSS 文 件 screen.css 变 为 
screen.scss， 无 需 做 任何 其 他 改变 就 可 以 为 其 添加 Sass 特 性 。 因 此 ， 尽 管 SCSS 语 法 出 现 较 晚 ， 但 
它 已 经 变 成 了 最 受 欢 迎 的 Sass 语 法 。 

起 初 ，Sass 只 有 一 种 语法 ， 叫 做 缩 进 语法 ， 那 时 就 简称 为 Sass。 为 了 阐述 这 两 种 语法 之 间 的 
差别 ， 我 们 将 查看 使 用 两 种 语法 编写 的 相同 代码 。 

Bc, 我们 来 看 SCSS 语 法 ， 如 代码 清单 C-1 所 示 。 


代码 清单 C-1 SCSS 语 法 示例 


/* Compass 将 CSS3 变 得 容易 了 |! 
尤其 是 CSS3 渐 变 */ 











Qimport "compass/css3" 


// 这 个 混入 类 让 我 们 可 以 轻松 地 制造 渐变 
// 它 会 为 我 们 挑选 颜色 ， 很 好 。 


Qmixin easy-gradient($bg, S$alpha: false) { 
Gif (Salpha) { 
$bg: rgba($bg, Salpha); 
} 
Stop: lighten ($bg, 5); 
Sbottom: darken ($bg, 5); 
@include background-image ( 
linear-gradient($top, S$bottom) 
) 
} 


nav { 
margin: 20px { left: 0; right: 0 } 
@include easy-gradient(tdccc); 
a ( color: blue; text-decoration: none } 


} 
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现在 ， 让 我 们 用 缩 进 震 法 编写 相同 的 代码 ， 如 代码 清单 C-2 所 示 。 
代码 清单 C-2” 缩 进 语 法 示例 


/* Compass 将 CSS3 变 得 容易 了 |! 
尤其 是 CSS3 渐 变 */ 


Qimport compass/css3 


// 这 个 混入 类 让 我 们 可 以 轻松 地 制造 渐变 
// 它 会 为 我 们 挑选 颜色 ， 很 好 。 


-easy-gradient($bg, $alpha: false) 
Gif (Salpha) 
Sbg: rgba($bg, Salpha) 
Stops lighten ($bg, 5) 
Sbottom: darken ($bg, 5) 
-background-image(linear-gradient($top, $bottom)) 


nav 
margin: 20px 
left: 0 
right: 0 
+easy-gradient (#ccc) 
a 
color: blue 
text-decoration: none 


上 述 两 段 代 码 有 一 些 明 显 的 不 同 ， 还 有 一 些微 妙 的 差别 。 让 我 们 来 一 一 解析 。 
C.1.1 空格 与 括号 、 分 号 


最 显著 的 差别 是 ， 纵 进 语 法 没有 论 括号 和 分 号。 在 SCSS 语 法 使 用 常见 花 括号 的 地 方 ， 缩 进 
语法 使 用 空格 。 同 样 ， 缩 进 语法 使 用 新 行 来 分 隅 属性 ， 不 使 用 分 号 。 

那些 训 欢 使 用 缩 进 语法 的 人 称 , 缩 进 语法 移 除 了 起 干扰 作用 的 符号 , 使 他 们 的 Sass 更 加 简洁 ， 
易于 阅读 。 那 些 右 欢 SCSS 的 人 至 受 随 意 使 用 空格 的 自由 ， 将 多 个 属性 放 在 一 行 或 者 将 一 个 长 也 
数 分 割 为 多 行 。 他 们 也 豆 欢 无 需 移 除 字符 ， 也 无 需 按 照 缩 进 语法 严格 的 空格 要 求 重 新 转换 格式 ， 
就 能 够 使 用 标准 CSS 语 法 。 

除了 使 用 空格 或 字符 这 个 最 明显 的 差别 ， 两 者 还 有 其 他 的 不 同 之 处 。 














C.1.2 @import 指 令 











在 SCSS 中 ，Q@import 指 令 需 要 用 括号 将 目标 包 时 起来， 但 是 缩 进 语 法 则 不 需要 括号 。 还 有 
非常 重要 的 一 点 是 , 使 用 @import 指 令 时 ,文件 扩展 名 不 是 必须 的 。 你 可 以 使 用 文件 扩展 名 , 但 
是 在 不 使 用 的 情况 下 ， 你 可 以 引入 .scss 文 件 或 者 .sass 文 件 。 使 用 指令 @import "some-file";， 
Sass 将 会 查找 some-file.scss 文 件 和 some-file.scss 文 件 。 因 此 ,两 种 语法 可 以 轻松 共存 , 你 可 以 在 使 
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用 SCSS 语 法 编写 样式 表 的 同时 ， 引 入 他 人 使 用 缩 进 语 法 编写 的 扩展 。 
C.1.3 混入 类 

创建 并 使 用 混入 类 的 方法 也 有 不 同 之 处 。 在 SCSS 中 ，eminxin 以 及 eincludae 指 今 分 别 用 来 
定义 并 使 用 混和 人 类 : 


Qmixin easy-gradient($bg, S$alpha: false) { ... ) 
Qinclude easy-gradient(tdccc); 


MARK a EEJHSscssTHIS BUR m, unl HEH =R RF mixin, EHRE 


Qinclude: 





-easy-gradient($bg, Salpha: false) 
+easy-gradient (#ccc) 


AEEA Eh, 其 混入 类 指令 十 分 简洁 , 但 还 是 有 些 人 喜欢 编 与 明显 的 eminxin 
和 einclude， 这 也 是 它们 在 缩 进 语法 中 依然 可 以 使 用 的 原因 。 


C.1.4 注释 


在 Sass 中 ， 有 三 种 不 同 的 注释 。 以 // 开 头 的 注释 不 会 出 现在 生成 的 CSS 中 ; 以 /* 开 始 的 注释 
将 会 出 现在 未 经 压缩 的 CSS 中 ; 以 /*! 开 头 的 注释 在 压缩 和 未 经 压 迫 的 CSS 文 件 中 神 会 出 现 。 在 
缩 进 语法 中 ， 如 末 作 者 将 每 行 缩 进 在 注释 标记 下 方 ， 所 有 的 注释 都 会 变 成 多 行 和 注释， 如 下 所 未 : 


// some comment 








which spans 
multiple lines 


/* This comment 
spans multiple 
lines too 


/*! As does 
this one 


在 SCSS 中 ，// 注 释 是 单行 注释 ， 其 余 两 个 多 行 注 释 必 须 包含 在 注释 符号 内 ， 如 下 所 示 : 


// some comment 
// which spans 
// multiple lines 


/* This comment 
spans multiple 
lines too */ 


/*! As does 
this one !*/ 
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C.1.5” 哪 种 语法 更 好 


Sass 爱 好 者 围绕 这 个 话题 展开 了 激烈 的 争论 ， 双 方 各 执 一 词 ， 也 有 人 承认 会 根据 不 同 目的 使 
用 两 种 语法 。 幸 运 的 是 ， 你 并 不 需要 做 出 抉择 。Sass 项 目的 维护 人 员 已 经 决定 保留 两 种 语法 ， 你 
也 可 以 使 用 sass-convert 命 令 行 工具 在 两 种 语法 之 间 进 行 转换 。 由 于 eimport 指 令 的 灵活 性 ， 
你 可 以 轻松 地 在 同一 个 项 目 中 使 用 两 种 语法 ， 但 是 不 能 在 同一 个 文件 中 同时 使 用 两 种 语法 。 
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实战 


“本 书 可 以 让 网 页 设计 师 和 开发 人 员 从 重复 劳 
动 中 解放 出 来 ， 体 会 撰写 CSS 的 乐趣 
ERI, Compass.app & Fire.app 开 发 者 


“我 对 本 书 的 出 版 充满 期 待 , 并 相信 它 一 定 会 把 
更 多 人 带 入 CSS 的 世界 








“Sass 与 Compass 创 建 者 提供 的 最 重要 的 一 手 资 
Tp, sed! 
一 一 David A. Mosher, DAVEMO Consulting 


“本 书 作 者 就 是 那些 将 CSS 转 换 成 了 更 有 趣 内 
容 的 人 
———Jeroen van Dijk, ADGOJI 


“解决 现 L Sz qu je] XR 页 的 优秀 示例 


—— —Jacob Rohde, Amino 
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人 民 邮 电 出 版 社 网 址 : www.ptpress.com.cn 





还 在 用 CSS 手 工 编写 网 页 布局 ? 还 在 用 
“查找 /替换 ”修改 十 六 进 制 颜色 值 ? 随 着 项 目 
规模 日 益 增 长 ， 组 织 样式 表 会 令 你 抓 狂 。 你 没 
有 想到 ， 自 己 把 大 部 分 时 间 都 浪费 在 了 这 些 细 
ERDE, WEA A Ab? Sassi 
Compass 将 你 从 这 些 重复 工作 中 解放 出 来 ， 引 
入 变量 、 混 合 器 、 选 择 器 藤 套 、 选 择 顺 继承 等 
概念 ， 为 标准 CSS 添 加 了 脚本 功能 和 组 件 库 ， 
帮助 Web 设 计 师 和 开发 人 员 大 幅度 简化 了 样式 
表 编 辑 工 作 。 它 们 能 自动 完成 很 多 枯燥 乏味 的 
务 ， 并 在 页 面 中 添加 动态 样式 ， 进 而 快速 精 
准 地 呈现 网 页 。 

本 书 是 使 用 这 两 种 革命 性 工具 创作 样式 表 
的 权威 指南 ， 内 容 循 序 渐进 ， 示 例 结合 实战 。 
四 位 作者 都 是 Sass 和 Compass 的 核心 团队 成 
n ( 及 创建 者 ) ， 向 读者 展示 了 高 效 使 用 这 两 
种 框架 的 精髓 。 

本 书 适 合 所 有 Web 设 计 师 、 前 端 开发 人 
员 、Web 应 用 产品 经 理 及 相关 人 员 阅 读 。 
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